如何更改Flutter上的应用启动图标？

﹏ヽ暗。殇╰゛Y 2022-11-15 11:53 476阅读 0赞

***Q:***

当我用flutter创建一个应用时，flutter的logo被用作两个平台的应用图标。

如果我想改变应用图标，是否要到两个平台目录中去替换那里的图片呢，我说的平台目录是指iOS的`myapp/ios/Runner/Assets.xcassets/AppIcon.appiconset`和Android的`myapp/android/app/src/main/res`。

或者是否可以将图片定义为Flutter Asset，图标以某种方式生成？

***A1:***

Flutter Launcher Icons旨在帮助快速生成Android和iOS的启动器图标：https://pub.dartlang.org/packages/flutter\_launcher\_icons

*  添加包到你的`pubspec.yaml`文件（在你的Flutter项目中）以使用它
 *  在`pubspec.yaml`文件中，指定要用于应用程序的图标的路径，然后选择是否要将图标用于iOS应用程序，Android应用程序或两者
 *  运行程序包
 *  默认的启动器图标现在已经被你的自定义图标所取代了

***A2:***

**像原生开发者一样设置启动器图标。**

我在使用和理解flutter\_launcher\_icons软件包时遇到了一些麻烦。 如果你是本机创建适用于Android或iOS的应用程序，那么此答案就是教你如何做。 尝试几次后，它是非常快速和简单的。

**Android**

Android启动器图标有前景层和背景层。

![7d91b1f91409073d180265a6a4882bd3.png][]

为Android创建启动器图标的最简单方法是使用Android Studio中的Asset Studio。你甚至不需要离开你的Flutter项目。(VS Code用户，你可以考虑使用Android Studio来完成这一步，它真的非常方便。)

右键点击项目大纲中的android文件夹。进入New > Image Asset。(如果没有看到Image Asset这个选项，可以尝试右键点击android/app文件夹) 现在你可以选择一个图片来创建你的启动器图标。

> 注意：我通常使用1024x1024像素的图片，但你肯定不能使用小于512x512的图片。如果你使用Gimp或Inkscape，你应该有两个图层，一个是前景图，一个是背景图。前景图应该有透明的区域让背景图层显示出来。

![cd1acc06c60c4afd89d730e8d59ffc0b.png][]

这将取代当前的启动器图标。你可以在mipmap文件夹中找到生成的图标:

![829a681fa84862a11837c426324ce714.png][]

最后，确保`AndroidManifest.xml`中的启动器图标名称与你上面的名称相同（默认为ic\_launcher）。

在模拟器中运行应用，确认启动器图标创建成功。

**iOS**

我一直习惯手动手动调整iOS图标的大小，但如果你有Mac，Mac App Store里有一个免费的应用，叫Icon Set Creator。你给它一张图片（至少1024x1024像素），它就会吐出你需要的所有尺寸（加上Contents.json文件）。

**Icon Set Creator**用法如下：

1.  将你的图像拖入视图
2.  选择您你的目标平台
3.  导出图标集文件夹

![0c9ab9492e2098868fb43e24aafb8fab.png][]

iOS图标不应该有任何透明度。在[此处][Link 1]查看更多准则:

在你创建了图标集之后，启动Xcode（假设你有Mac）并使用它打开你的Flutter项目中的ios文件夹。然后进入Runner > Assets.xcassets并删除AppIcon项目。

![0507d53e08ca64f954666d202d57a9d1.png][]

之后右击，选择导入…选择刚才创建的图标集。

![3196773947ef9b2039cadf2ef0841b14.png][]

这样就可以了。通过在模拟器中运行应用程序来确认图标是否已经创建。

**如果你没有Mac…**  
你仍然可以用手创建所有的图像。在你的Flutter项目中，转到`ios/Runner/Assets.xcassets/AppIcon.appiconset`。

![db3b2da076bd593046361c07f74863ef.png][]

你所需要的图片尺寸是文件名中的倍数尺寸。例如，Icon-App-29x29@3x.png 将是 29 乘以 3，也就是 87 像素正方形。你需要保持相同的图标名称，或者编辑JSON文件。

## 视频课程 ##

如需要获取博主完整的**Flutter全栈式开发课程**，请 [**点击跳转**][Link 2]  
![qr\_adv][qr_adv]

--------------------

**关注我的公众号：编程之路从0到1**  
![编程之路从0到1][0_1]

[7d91b1f91409073d180265a6a4882bd3.png]: /images/20221022/64156e4928df41e1839dcd5a5e5932c4.png
[cd1acc06c60c4afd89d730e8d59ffc0b.png]: /images/20221022/4a434fb5191440018b580924cd490da1.png
[829a681fa84862a11837c426324ce714.png]: https://img-blog.csdnimg.cn/img_convert/829a681fa84862a11837c426324ce714.png
[0c9ab9492e2098868fb43e24aafb8fab.png]: https://img-blog.csdnimg.cn/img_convert/0c9ab9492e2098868fb43e24aafb8fab.png
[Link 1]: https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/
[0507d53e08ca64f954666d202d57a9d1.png]: https://img-blog.csdnimg.cn/img_convert/0507d53e08ca64f954666d202d57a9d1.png
[3196773947ef9b2039cadf2ef0841b14.png]: https://img-blog.csdnimg.cn/img_convert/3196773947ef9b2039cadf2ef0841b14.png
[db3b2da076bd593046361c07f74863ef.png]: https://img-blog.csdnimg.cn/img_convert/db3b2da076bd593046361c07f74863ef.png
[Link 2]: http://m.study.163.com/provider/480000001855430/index.htm?share=2&shareId=480000001855430
[qr_adv]: https://img-blog.csdnimg.cn/img_convert/eb3c16913c155e08e1443a0029003aa1.png
[0_1]: https://img-blog.csdnimg.cn/20190301102949549.jpg