如何在Flutter上更改应用程序启动器图标?


195

当我使用flutter create命令创建应用程序时,flutter徽标将用作两个平台的应用程序图标。

如果我想更改应用程序图标,是否应该同时进入两个平台目录并在其中替换图像?,分别是myapp/ios/Runner/Assets.xcassets/AppIcon.appiconset针对iOS和myapp/android/app/src/main/resAndroid的平台目录 。

还是可以将图像定义为Flutter Asset并且以某种方式生成图标?


您可以用两种方式更新appicon,我在这里
Mayur Dabhi

Answers:


232

Flutter启动器图标旨在帮助快速生成适用于Android和iOS的启动器图标:https : //pub.dartlang.org/packages/flutter_launcher_icons

  • 将包添加到您的pubspec.yaml文件中(在Flutter项目中)以使用它
  • 在pubspec.yaml文件中,指定要用于应用程序的图标的路径,然后选择是否要将图标用于iOS应用程序,Android应用程序或两者。
  • 运行包
  • 瞧!默认启动器图标现已替换为您的自定义图标

我希望将视频添加到GitHub自述文件中以进行演示

有关如何运行该工具的视频可以在此处找到。

如果有人想提出改进建议/报告错误,请在GitHub项目上将其添加为问题

更新:从2018年1月24日星期三开始,您应该能够创建新图标,而不会覆盖Flutter项目中现有的旧启动器图标。

更新2:自v0.4.0(2018年6月8日)起,您可以为Android图标指定一个图像,为iOS图标指定一个图像。

更新3:从v0.5.2(2018年6月20日)开始,您现在可以为Flutter项目的Android应用添加自适应启动器图标


1
对图像有什么要求吗?
卡米诺

1
我只找到一种尺寸的参考710x599。选择它的原因是什么?我本来期望512x5121000x1000或东西方反正。
Suragch

1
@Suragch只是在Google上快速搜索了一个图标,因此我可以对其进行快速测试。我包括另外两个图标的大小,因此市民可以尝试一下包(1024×1024 128×128和),你可以在这里找到这些:github.com/fluttercommunity/flutter_launcher_icons/tree/master/...
马克·奥沙利文

2
我可以建议软件包read.me提供有关图像大小的建议。
布雷特·萨顿

1
这是我发现过的最好的东西之一。谢谢你,兄弟!
贝尔

133

像本地开发人员一样设置启动器图标

使用和理解flutter_launcher_icons软件包时遇到了一些麻烦。如果您是本机创建适用于Android或iOS的应用,那么此答案就是您将如何做。完成几次后,它是非常快速和容易的。

安卓系统

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

在此处输入图片说明

(图片摘自Android文档

为Android创建启动器图标的最简单方法是使用可在Android Studio中直接使用的Asset Studio。您甚至不必离开Flutter项目。(VS Code用户,您可能会考虑仅将Android Studio用于此步骤。这确实非常方便,并且熟悉另一个IDE也无害。)

右键单击android项目大纲中的文件夹。转到新建>图片资产。(android/app如果看不到Image Asset作为选项,请尝试右键单击该文件夹。)现在,您可以选择一个图像来从中创建启动器图标。

注意:我通常使用1024x1024像素图像,但是您绝对不能使用小于该像素的图像512x512。如果使用的是Gimp或Inkscape,则应具有两层,一层用于前景,一层用于背景。前景图像应具有透明区域,以使背景层显示出来。

在此处输入图片说明

(来自这里的狮子剪贴画)

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

如果您希望手动创建启动器图标,请参见此答案以获取帮助。

最后,确保AndroidManifest中的启动器图标名称与您在上面调用的名称相同(ic_launcher默认情况下):

application android:icon="@mipmap/ic_launcher"

在模拟器中运行应用程序,以确认启动器图标已成功创建。

的iOS

我一直习惯手动手动调整iOS图标的大小,但是如果您使用Mac,Mac App Store中有一个名为Icon Set Creator的免费应用程序。您给它一个图像(至少1024x1024像素),它将吐出您需要的所有尺寸(加上Contents.json文件)。感谢这个答案的建议。

iOS图标不应具有任何透明度。在此处查看更多指南。

创建图标集后,启动Xcode(假设您使用Mac)并使用它ios在Flutter项目中打开文件夹。然后转到Runner> Assets.xcassets并删除AppIcon项。

在此处输入图片说明

即右键单击后,选择导入...。选择刚创建的图标集。

而已。通过在模拟器中运行应用程序确认图标已创建。

如果您没有Mac ...

您仍然可以手动创建所有图像。在您的Flutter项目中,转到ios/Runner/Assets.xcassets/AppIcon.appiconset

您需要的图像大小是文件名中的乘以大小。例如,Icon-App-29x29@3x.png将为29times 3,即87像素为正方形。您要么需要保持相同的图标名称,要么编辑JSON文件。


1
如果您难以理解它,我很乐意回答您的任何问题。提出一个问题,我会尽快回复您:github.com/fluttercommunity/flutter_launcher_icons
Mark O'Sullivan

2
@ MarkO'Sullivan,谢谢。我的猜测是包装很好。只是文档使我难以理解。例如,用于初始图像的大小,为Android创建的背景图层等。具有详细的指南来指导初学者完成该过程将非常有帮助。
Suragch

该软件包的很好替代品,它不是官方的,似乎不再起作用,并且已经有6个月未更新了……
Yann39,19年

1
这有帮助。在Android Studio中,没有添加Image Asset的选项。我从github / flutter问题中学到的工作是在Android Studio中打开/ android文件夹(在flutter项目中)作为标准的单独“ Android”项目。右键单击/ res文件夹时,将显示该选项。
MwamiTovi

2
@MwamiTovi是正确的,但是您需要等待gradle同步后才能右键单击,甚至手动同步,否则“ new-> image asset”将不会显示。
丹尼尔

108

遵循简单的步骤:

  1. flutter_launcher_icons插件添加到pubspec.yaml

例如

dev_dependencies: 
  flutter_test:
    sdk: flutter

  flutter_launcher_icons: ^0.7.5

flutter_icons:
  image_path: "icon/icon.png" 
  android: true
  ios: true
  1. 为指定路径准备一个应用程序图标。 e.g. icon/icon.png

  2. 在终端上执行命令以创建应用程序图标:

$ flutter pub get

$ flutter pub pub run flutter_launcher_icons:main

要检查所有可用选项并为Android和iOS设置不同的图标,请参阅

希望这对其他人有帮助。


4
这对我有用;只有在我运行最后一行的时候flutter pub pub run flutter_launcher_icons:main。谢谢你的提示!
olisteadman '19

3
我收到错误android.dart:164:25:错误:位置参数过多:允许1个,但找到4个。
ir2pid

如果激活了暗模式,我可以切换图标吗?
Maximiliano Sosa

1
@ ir2pid解决需要更新版本flutter_launcher_icons错误:0.7.5
GökçerGökdal


17

我已按照以下步骤进行了更改:

1)请在您的pubspec.yaml页面上添加此依赖项

 dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons: ^0.7.4

2)您必须在您的项目上上传要作为启动器图标显示的图像/图标。(我在项目中创建了一个文件夹名称:image,然后在image文件夹中上传了logo.png)。现在,您必须添加以下代码,并将图像路径粘贴到pubspec.yaml页面中的image_path:上。

flutter_icons:
  image_path: "images/logo.png"
  android: true
  ios: true

3)转到终端并执行以下命令:

flutter pub get

4)执行命令后,输入以下命令:

flutter pub run flutter_launcher_icons:main

5)完成

注意:(当然要添加来自

https://pub.dev/packages/flutter_launcher_icons#-installing-tab-



4

在Flutter中设置应用程序图标的最佳推荐方式。

我在Flutter中找到了一个用于设置应用程序图标的插件,名为“ flutter_launcher_icons”。我们将使用此插件将应用程序图标设置为抖动。

  1. 将此插件添加到项目根目录下的pubspec.yaml文件中。请检查以下代码,

    依赖项:
    flutter:
    sdk:flutter
    cupertino_icons:^ 0.1.2
    flutter_launcher_icons:^ 0.7.2 + 1

保存文件并在终端上运行flutter pub get。

  1. 在项目根目录中的文件夹资产中创建一个文件夹资产,还创建一个文件夹图标,并将您的应用程序图标放置在该文件夹中。我将建议用户使用1024x1024应用程序图标大小。我已将应用程序图标放置在图标文件夹中,现在我将应用程序图标路径设置为assets / icon / icon.png

  2. 现在,在pubspec.yaml中添加以下代码,

    flutter_icons:
    android:“ launcher_icon”
    ios:true
    image_path:“ assets / icon / icon.png”

  3. 保存文件并在终端上运行flutter pub get。运行命令后,如下运行第二条命令

    flutter pub运行flutter_launcher_icons:main -f pubspec.yaml

然后运行应用


尽管您回答了相同的旧正确答案,但至少您强调了要点。
费利佩·奥古斯托


-5

您可以通过在pubspec.yaml中使用flutter_launcher_icons来实现

另一种方法是将一个用于Android,另一个用于iOS

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.