本文由 简悦SimpRead 转码，原文地址 www.raywenderlich.com
当你制作多平台应用程序时，你需要添加或构建特定于某个平台的东西......。
到目前为止，你已经使用Dart语言和各种Flutter习语为Flutter工具包构建了Flutter应用程序。然后你建立了这些应用程序并将其部署到iOS和Android设备上，而不需要做任何特别的事情。这几乎是神奇的。
然而，有时你需要添加特定平台的代码，以迎合特定商店或操作系统的需求。
例如，你可能需要改变你指定应用程序图标、启动资产和闪屏的方式，以适应每个平台。
在这一章中，你将通过设置你的应用程序的一些重要部分，使其无论在用户选择哪个平台上都看起来很好。你将继续使用上一节中的菜谱搜索器应用程序。
注意。你也可以通过打开本章的启动项目来重新开始。如果你选择这样做，记得点击获取依赖项按钮或从终端执行
flutter pub get。你还需要在lib/network/recipe_service.dart中添加你的API密钥和ID。
在处理平台特定的资产时，你会希望使用本地开发工具，所以你需要安装Xcode 12来完成本章。一旦完成了这些，就开始打开本章的启动项目。
设置应用程序的图标
应用程序图标是任何应用程序的品牌形象中最重要的部分之一。它显示在商店页面和主屏幕上，以及通知和设置中。它是应用程序的头像，所以它必须看起来恰到好处。
要做到这一点，你需要使用约束。安卓和iOS不仅使用不同的约束条件，而且它们的规定也不同，这意味着你需要为每个平台调整你的图标。
默认情况下，当你用flutter工具创建一个新的Flutter项目时，它会将Flutter的F标志作为项目的图标。
这不仅没有给你的配方应用打上品牌，而且应用商店也不可能批准它。你的第一个任务将是更新到一个在每个平台上看起来都很好的自定义图像。
为Android优化应用程序图标
在Android Studio中打开项目，在 android/app/src/main/ 下打开 AndroidManifest.xml 。这个文件定义了你的应用程序的许多与启动、权限、Play Store和Android系统有关的Android属性。
在 "应用程序 "下的一个属性定义了启动器屏幕图标。
android:icon="@mipmap/ic_launcher"
@mipmap部分意味着它解析到 mipmap-{resolution} 文件夹以加载正确设备屏幕比例的图形。ic_launcher是图标的文件名。
在in/res下，你会发现各种**mpimap-**子文件夹。
在Finder中，打开章节材料中的assets/icons/android。从Finder中复制res文件夹并在Android Studio中替换android/app/src/main/res。
如果你收到一个弹出窗口，确认你要把文件夹复制到指定的目录，点击Refactor或OK，这取决于你的Android Studio版本。
展开android/app/src/main/res文件夹，确认你已经将res文件夹粘贴在正确的位置。它应该与java和kotlin文件夹处于同一级别，而不是在现有的res文件夹内。
热重载不会更新启动器的图标（热重启也不会）。为了使这些变化生效，你需要停止该应用程序并再次运行它。
在主屏幕上，你现在会看到新的启动器图标。在安卓设备或模拟器上运行该应用程序，可以看到以下内容。
很好，你刚刚把默认的资产换成了一些很酷的自定义资产。如果你需要调整图标的填充尺寸，或者如果你以后要做自己的应用程序，想要导入安卓图片，你需要导入并调整艺术品的尺寸。这就是下一步!
个性化的安卓应用图标
当你使用自己的定制艺术品时，除了从文件夹中复制和粘贴外，你还需要采取一些步骤。你需要在你的应用程序的安卓部分工作，而不是在Flutter项目中。
直接从Android Studio菜单中打开Android文件夹，选择文件▸打开，然后导航到你项目的android文件夹。最后，点击打开。
等待，直到Gradle同步完成。你的项目完成所需的时间可能有所不同。
导航到app文件夹，右键点击res，选择New ▸ Image Asset。
将显示配置图像资产的弹出窗口。点击文件夹图标，打开自定义图像。
找到你的主艺术品图像。在这种情况下，你会在assets/中找到它。选择该图像并点击打开。
加载的图像将显示为这样。
点击下一步。
下一个屏幕会显示你要保存资产的路径。请记住这是为Android项目准备的，而不是你的Flutter项目，所以文件夹层看起来与你到目前为止所做的不同。保留默认值并点击完成。
关闭这个Android项目，回到你的Flutter项目。
你现在已经看到了如何为你的安卓应用调整自定义图画的大小。最棒的是，在您完成这些更新后，您的Flutter应用程序会自动更新
和以前一样，为了使这些变化生效，您需要停止该应用并再次运行它。你会看到相同的启动器图标。在安卓设备或模拟器上运行该应用程序，可以看到以下内容。
接下来，你将对iOS应用图标进行处理。
为iOS优化应用图标
当你创建一个支持iOS的Flutter项目时，Flutter会在项目中生成一个ios子文件夹，与android文件夹处于同一级别。这包含了在iOS上运行的库和支持文件。在该文件夹中是一个Xcode工作区，Runner.xcworkspace。
注意：iOS开发者，Flutter应用程序使用Runner.xcworkspace，而不是传统的Runner.xcodeproj。
在Finder中，打开章节材料中的starter/ios，双击Runner.xcworkspace。如果你打开了Xcode，你也可以导航到该文件夹并打开它。
Flutter使用工作空间来构建应用程序，因为在引擎盖下，它使用Cocoapods来管理构建和部署iOS应用程序所需的iOS特定依赖。工作区包含主运行器项目和Cocoapods项目，以及构建和部署iOS应用程序的所有支持文件。
该项目包含大量的模板和助手，以便在iOS应用程序上下文中运行应用程序。不要担心从该项目中构建应用程序。继续使用Android Studio或命令行来构建和部署到模拟器上。
查看应用程序图标
要查看应用程序的图标，请打开Runner ▸ Runner ▸ Assets.xcassets。这是一个资产目录，一种以配置感知的方式组织Xcode项目中的资产的方法。
在里面，你会看到AppIcon和LaunchImage。
点击AppIcon可以看到默认Flutter图标所支持的所有设备和分辨率。
在Finder中，打开章节材料中的assets/icons/ios。将里面的每张图片拖到资产目录中，为每个尺寸抓取合适的图片。你可以通过名称来判断哪个是哪个。
如果你抓错了，不要担心。任何尺寸不对的图片旁边都会出现一个黄色的警告三角形。
保存这些修改，并返回到Android Studio。执行完全停止并在iOS模拟器上再次运行，以看到主屏幕上的新图标。
设置应用程序的名称
现在你在设备启动屏幕上有了一个闪亮的新图标，你会注意到应用的名字没有很好的格式化，这有损于体验。
设置启动器名称是一个简单的修复方法，但你也必须为每个平台做这件事。
再次打开AndroidManifest.xml。找到application节点的android:label属性，将文本改为。
Recipe 🔎
再次构建并运行该应用程序。通过选择一个较短的标签，该名称将适合更多的Android启动器。
你也可以在iOS上做同样的事情。回到Xcode，打开Runner ▸ Runner ▸ Info.plist。这个文件类似于AndroidManifest.xml，它包含了关于你的应用程序的信息，供操作系统使用。
在信息属性列表下，将包的名称也改为 "Recipe 🔎"。
回到Android Studio中，构建并运行iOS的应用程序。
好了，看起来好多了!
添加一个启动屏幕
你要为你的应用程序做的下一个收尾工作是一个启动屏幕。当用户启动应用程序时，Dart虚拟机需要花一些时间来旋转，所以你要给他们一些东西，而不是一个白色的屏幕，以增加光泽度。再一次，你需要为iOS和Android分别设置。
在iOS中设置一个启动图像
在iOS中，设置一个启动图像是很简单的。
在Xcode中，再次打开ios/Runner.xcworkspace，选择Assets.xcassets，这次选择LaunchImage。
从章节材料中找到assets/launch image下的splash.png，然后把它拖到1x的方格中作为启动图像。
用户将在应用启动时看到这张图片，直到主屏幕准备好。
因为你只定义了一个版本的图片，iOS会根据其他高分辨率的屏幕来缩放它。因为图片里有文字，所以你通常也会提供高分辨率的图片，但在这种情况下，你会在后面修改它。
再次从Android Studio构建并在iOS上运行。
在一些模拟器上，它有点压扁了。在其他模拟器上，它甚至没有显示出来，但你现在会解决这个问题。
显示一个更复杂的启动UI
一张好的图片可以在很大程度上使你的应用程序看起来很精致。然而，你刚才使用的这张图片是有问题的，因为内置的文字在各种设备尺寸和分辨率下很难得到正确的显示。这给翻译工作增加了一层复杂性。
现在，LaunchScreen.storyboard 中的UIImageView使用了你之前添加到资产目录中的启动图片。应用程序在启动时加载这个故事板，并显示它，直到它完成加载。现在从Runner ▸ Runner ▸ LaunchScreen.storyboard打开这个故事板。
添加约束条件
你的第一步是使图像充满屏幕而不扭曲其内容。这将使它在所有设备尺寸上看起来都很好。
展开视图控制器场景▸视图控制器▸视图，选择LaunchImage。
然后，点击底部的添加新约束条件按钮。
将所有四个约束条件设置为0，并确保对边距的约束没有被选中。然后，点击添加4个约束条件来设置约束。这将迫使图像填满它的超视图。
接下来，在属性检查器中，将内容模式改为前景填充。这将调整图像的大小以填充图像视图，但保持长宽比不变，必要时将其截断。
用一个标签代替标题
让文本附在图像上并不理想，所以你要用一个有自己约束的标签来代替它。要做到这一点，你需要一个新的图像。
在资产目录中打开LaunchImage。在属性检查器中，将规模值改为单一规模。这个设置让系统知道该图像只有一个版本。对于像照片这样的图像，这是首选，因为它有一个原始分辨率。
在与原始飞溅图片相同的assets文件夹中，你也会发现alloo.jpg。把它拖到目录中来替换现有的图片。
回到LaunchScreen.storyboard，从Library拖一个Label到视图上。如果它还不可见，你可以从View ▸ Show Library进入库。
为标签添加约束，就像你为图像所做的那样，但这次要添加这三个约束。
- 顶部到140。
- 前部和后部空间为0。
- 不设置底约束。
然后，在属性检查器中，设置以下值。
- 文本为配方查找器。
- 颜色为白颜色。
- 字体为系统，风格为厚重，尺寸为100。
- 对齐为中心。
- 行数为2。
- 断行为换字.
- 阴影为深灰色，阴影偏移为高度为2，宽度为2。
屏住呼吸，以美学的名义完成最后一个步骤。仍然选择标签，移到尺寸检查器。双击垂直的约束，在编辑器中打开该约束。将第二项从Top.Layout Guide.Bottom改为Superview.Top。
这就把标签顶部的锚点从布局指南（在启动过程中会改变）改为屏幕的顶部。这可以确保标签的位置一致。
呼......这是一个很大的设置，但其结果确实是一个_声明_。当你完成后，故事板将看起来像这样。
执行一个句号，然后从Android Studio构建并再次运行，就可以看到新的启动画面。
现在，图像不再被压扁，文字可以阅读，你的启动画面看起来很棒。
在Android中设置一个启动图像
在安卓系统中，设置启动画面就不那么容易了。在Android Studio中，在项目浏览器中导航到android/app/src/main/res/drawable/并打开launch_background.xml。
这个文件是一个layer-list drawable，它描述了一个在应用启动时显示的可绘制的用户接口。由于这是一个drawable，它没有iOS storyboard的所有选项，所以你不能添加单独的文本或高级布局。从好的方面看，渲染是快速和有效的。
在文件中，在layer-list节点内，第一个item之后，添加以下代码。
<item>
<bitmap
android:gravity="fill"
android:src="@drawable/splash" />
</item>
这就从drawable文件夹中加载了图片splash，并将其拉长以填充窗口。
接下来，将splash.png从章节assets文件夹复制到android/app/src/main/res/drawable。
构建并运行，飞溅的图片将显示，直到用户界面准备好。
使用Android的两阶段启动
应用程序在启动时要经过两个阶段。第一个是应用启动，它发生在用户点击启动器图标和应用代码开始执行之间。第二个是在该点和Flutter渲染主要活动的第一帧之间。对于这些阶段中的每一个，你可以为启动屏幕提供不同的可绘制资产。
在AndroidManifest.xml中，你用属性定义主活动的第一个阶段。
android:theme="@style/LaunchTheme"
这对应于android/app/src/main/res/values/styles.xml中定义的名为LaunchTheme的样式。它将背景设置为你已经看过的drawable。
第二阶段，从Flutter启动到第一个屏幕，由一个meta-data节点定义，你会在一个解释的注释下找到它。
<meta-data
android:
android:resource="@drawable/launch_background"
/>
这意味着你可以分别重新定义它们。
把android:resource改成@drawable/loading_background；这可以让你使用一个与以前不同的drawable。
接下来，复制launch_background.xml并命名为loading_background.xml。
然后把bitmap的android:src改为@drawable/loading。现在这将加载一个名为loading的图片。
最后，从素材文件夹中复制并粘贴assets/launch image/loading.png到drawable，与其他Android资源一起。
这个文件是一般第一个用户界面的静态图像。在加载真正的用户界面之前向用户展示这个，但会使加载时间看起来更快。
建立并运行。现在，你会看到你已经用应用启动前的占位符图片替换了第一个启动屏幕。
你成功了! 你已经在Android和iOS中更新了你的应用程序的图标和启动屏幕。
关键点
- Flutter为iOS和Android生成了应用项目，您可以编辑这些项目来打造您的应用。
- 这些项目包含与启动应用和准备启动Flutter主视图有关的资源和代码。
- 您需要为每个平台分别设置与应用程序启动有关的**资产。
从哪里开始？
你可能已经看到其他应用程序有更多的动态或动画的闪屏。这些通常被创建为一个全屏状态的小部件，在Flutter虚拟机加载和启动主屏幕小部件之间的预定时间内显示。
动态闪屏给你的应用程序的启动带来了更多的亮点，但你仍然应该包括一个基于图像的启动屏幕，在闪屏加载之前显示。如果你想在你的应用程序中实现一个，splashscreen包是一个好的开始。pub.dev/packages/sp…。
