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

Question

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

如果我想更改应用程序图标，我应该去两个平台目录并在那里替换图像吗？平台目录我的意思是 myapp/ios/Runner/Assets.xcassets/AppIcon.appiconset 用于 iOS 和 myapp/android/app/src/main/res 用于Android.

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

Answer 1

您必须将 Flutter 图标文件替换为您自己的图像。本网站将帮助您将 png 转换为各种尺寸的启动器图标：

https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html

Answer 2

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

将包添加到您的 pubspec.yaml 文件（在您的 Flutter 项目中）以使用它
在 pubspec.yaml 文件中指定您希望用于应用程序的图标的路径，然后选择是否要将图标用于 iOS 应用程序、Android 应用程序或两者兼而有之。
运行套餐
瞧！默认启动器图标现已替换为您的自定义图标

我希望在 GitHub 自述文件中添加一个视频来演示它

可以找到显示如何运行该工具的视频 here。

如果有人想提出改进建议/报告错误，请add it as an issue on the GitHub project。

更新： 自 2018 年 1 月 24 日星期三起，您应该能够在不覆盖 Flutter 项目中现有的旧启动器图标的情况下创建新图标。

更新 2： 自 v0.4.0（2018 年 6 月 8 日）起，您可以为 Android 图标指定一张图片，为 [=49] 指定一张单独的图片=]图标。

更新 3： 从 v0.5.2（2018 年 6 月 20 日）开始，您现在可以为 Flutter 项目的 Android 应用程序添加自适应启动器图标

Answer 3

遵循简单的步骤：

1. 添加 flutter_launcher_icons 插件到 pubspec.yaml

例如

dev_dependencies: 
  flutter_test:
    sdk: flutter

  flutter_launcher_icons: "^0.9.0"

flutter_icons:
  image_path: "icon/icon.png" 
  android: true
  ios: true
  # optionally, as transparency is not allowed on app store
  # remove_alpha_ios: true

2.准备指定路径的应用程序图标。 e.g. icon/icon.png

3. 在终端执行命令创建应用程序图标：

$ flutter pub get

$ flutter pub run flutter_launcher_icons:main

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

更新：

flutter_launcher_icons 0.8.0 版本（2020 年 9 月 12 日）添加了对口味的支持

Flavors 通常用于为 dev 和 prod

等不同环境构建应用

社区编写了一些您可能会觉得有用的文章和包。这些 articles 解决了 iOS 和 Android 的风格。

Answer 4

最好的方法是分别更改 iOS 和 Android 的启动器图标。

分别更改iOS和Android模块中的图标。该插件从变形的同一图标生成不同大小的图标。

关注这个link： https://flutter.dev/docs/deployment/android

Answer 5

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

我在使用和理解 flutter_launcher_icons 包时遇到了一些问题。如果您本机为 Android 或 iOS 创建应用程序，此答案就是您的做法。一旦你做了几次，它是非常快速和容易的。

Android

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

（图片改编自Android documentation）

为 Android 创建启动器图标的最简单方法是使用 Android Studio 中提供的 Asset Studio。您甚至不必离开您的 Flutter 项目。（VS Code 用户，你可以考虑使用 Android Studio 就为了这一步。真的很方便，熟悉另一个 IDE 也无妨。）

右键单击项目大纲中的 android 文件夹。转到 新建 > 图像资源。（如果您没有看到 Image Asset 选项，请尝试右键单击 android/app 文件夹。另请参阅下面的评论以获取更多建议。）现在您可以 select 用于创建启动器图标的图像。

Note: I usually use a 1024x1024 pixel image but you should certainly use nothing smaller that 512x512. If you are using Gimp or Inkscape, you should have two layers, one for the foreground and one for the background. The foreground image should have transparent areas for the background layer to show through.

（来自 here 的狮子剪贴画）

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

如果您希望手动创建启动器图标，请参阅 this answer 寻求帮助。

最后，确保 AndroidManifest 中的启动器图标名称与上面的名称相同（默认为 ic_launcher）：

application android:icon="@mipmap/ic_launcher"

运行模拟器中的app确认启动器图标创建成功

iOS

我过去常常手动单独调整 iOS 图标的大小，但如果您有 Mac，Mac App Store 中有一个名为 Icon Set Creator. You give it an image (of at least 1024x1024 pixels) and it will spit out all the sizes that you need (plus the Contents.json file). Thanks to this answer 征求建议。

iOS 图标不应该有任何透明度。查看更多指南 here。

创建图标集后，启动Xcode（假设您有一个Mac）并使用它打开您的Flutter 项目中的ios 文件夹。然后转到 运行ner > Assets.xcassets 并删除 AppIcon 项。

之后右键单击并选择 导入...。选择您刚刚创建的图标集。

就是这样。确认该图标是由运行应用程序在模拟器中创建的。

如果您没有 Mac...

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

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

Answer 6

我建议您使用下面链接的网站

App Icon Creator

第一步：上传图片，

第 2 步：进行必要的更改并点击下载（不要更改文件名）

第 3 步：将下载的 Zip 文件解压缩到相应的文件夹中

android/app/src/main/res

Answer 7

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

我找到了一个在 flutter 中设置应用程序图标的插件，名为 flutter_launcher_icons。我们可以使用这个插件在flutter中设置app图标。

在项目根目录的pubspec.yaml文件中添加这个插件。请检查下面的代码，

dependencies:    
 flutter:    
  sdk: flutter    
 cupertino_icons: ^0.1.2    
 flutter_launcher_icons: ^0.7.2+1**

保存文件，运行 flutter pub 进入终端。

在文件夹 assets 的项目根目录中创建一个文件夹 assets，同时创建一个文件夹图标并将您的应用程序图标放在该文件夹中。我会向用户推荐 1024x1024 的应用程序图标大小。我已将应用程序图标放在图标文件夹中，现在我的应用程序图标路径为 assets/icon/icon.png
现在，在pubspec.yaml中添加下面的代码，

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

保存文件，运行 flutter pub 进入终端。运行ning 命令后运行第二个命令如下

flutter pub run flutter_launcher_icons:main -f pubspec.yaml

然后运行应用

Answer 8

您可以通过在 pubspec.yaml

中使用 flutter_launcher_icons 来实现

另一种方法是 android 使用一个，iOS 使用另一个

Answer 9

我按照以下步骤修改了它：

1) 请在您的 pubspec.yaml 页面

添加此依赖项

 dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons: ^0.7.4

2) 您必须在您的项目上上传一个 image/icon，您希望将其视为启动器图标。（我在我的项目中创建了一个文件夹 name:image，然后在图像文件夹中上传了 logo.png）。现在您必须添加以下代码并将图像路径粘贴到 image_path: 在 pubspec.yaml 页面中。

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

3) 转到终端并执行此命令：

flutter pub get

4) 执行命令后输入以下命令：

flutter pub run flutter_launcher_icons:main

5) 完成

N.B:(当然要从

添加一个更新的依赖

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

)

Answer 10

标记为正确答案的答案还不够，您还需要一步，在终端中输入此命令以创建图标：

flutter 酒吧运行 flutter_launcher_icons:main

Answer 11

创建新的 Flutter 应用程序时，它有一个默认的启动器图标。要自定义此图标，您可能需要查看 flutter_launcher_icons 包。

或者，您可以使用以下步骤手动完成。此步骤包括将这些占位符图标替换为您应用的图标：

Android

查看 Material Design product icons 图标设计指南。
在 <app dir>/android/app/src/main/res/ 目录中，将图标文件放在使用配置限定符命名的文件夹中。默认 mipmap- 文件夹展示了正确的命名约定。
在 AndroidManifest.xml 中，更新应用程序标签的 android:icon 属性以引用上一步中的图标（例如，<application android:icon="@mipmap/ic_launcher" ..）。
要验证图标是否已被替换，运行您的应用并检查启动器中的应用图标。

iOS

查看 iOS App Icon 准则。
在 Xcode 项目导航器中，select Assets.xcassets 在 Runner 文件夹中。使用您自己的应用程序图标更新占位符图标。
验证图标是否已被运行使用 flutter run 应用程序替换。

Answer 12

按照以下步骤操作：-

1.在pubspec.yaml[=36=中添加flutter_luncher_icons的依赖] file.You可以从here找到这个插件。

2. 在 asstes 文件夹 和 pubspec.yaml 中添加您需要的图片文件如下。

pubspec.yaml

name: NewsApi.org description: A new Flutter application. # The following line prevents the package from being accidentally published to # pub.dev using `pub publish`. This is preferred for private packages. publish_to: 'none' # Remove this line if you wish to publish to pub.dev https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html version: 1.0.0+1 environment: sdk: ">=2.7.0 <3.0.0" dependencies: flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^1.0.1 fluttertoast: ^7.1.6 toast: ^0.1.5 flutter_launcher_icons: ^0.8.0 dev_dependencies: flutter_test: sdk: flutter flutter_icons: image_path: "assets/icon/newsicon.png" android: true ios: false # The following section is specific to Flutter. flutter: # The following line ensures that the Material Icons font is # included with your application, so that you can use the icons in # the material Icons class. uses-material-design: true assets: - assets/images/dropbox.png fonts: - family: LangerReguler fonts: - asset: assets/langer_reguler.ttf # fonts: # - family: Schyler # fonts: # - asset: fonts/Schyler-Regular.ttf # - asset: fonts/Schyler-Italic.ttf # style: italic # - family: Trajan Pro # fonts: # - asset: fonts/TrajanPro.ttf # - asset: fonts/TrajanPro_Bold.ttf # weight: 700 # # For details regarding fonts from package dependencies, # see https://flutter.dev/custom-fonts/#from-packages

3. 然后运行终端中的命令 flutter pub get 然后 flutter_luncher_icon。这就是我在成功运行命令后得到的结果。午餐图标也生成成功

我的终端

[E:\AndroidStudioProjects\FlutterProject\NewsFlutter\news_flutter>flutter pub get Running "flutter pub get" in news_flutter... 881ms E:\AndroidStudioProjects\FlutterProject\NewsFlutter\news_flutter>flutter pub run flutter_launcher_icons:main ════════════════════════════════════════════ FLUTTER LAUNCHER ICONS (v0.8.0) ════════════════════════════════════════════ • Creating default icons Android • Overwriting the default Android launcher icon with a new icon ✓ Successfully generated launcher icons

Answer 13

我使用了几种方法来更改 flutter app lancher 图标，但只有手动方法有点简单和好。因为你会知道它是如何工作的。

所以要更改 flutter ios 图标。首先获取 1024×1024 像素图标的副本，并使用 appicon.co 生成器为 android 和 ios 生成一组图标。当您获得 zip 文件时，它可以联系两个文件夹 ios 和 android 打开 ios 文件夹并复制文件夹并替换 ios/runner 目录中的文件夹。

对于 android，复制 android 文件夹中的所有文件夹并替换 android/app/src/main/res/drawable 中的文件夹。

替换 ios 和 android 上的文件夹后，停止应用程序并重新运行，您的图标将会更改。

Answer 14

您可以通过 this link

flutter_launcher_icons 0.9.0

如果您需要如何在 flutter 中更改图标启动器的演示 check this out

希望我的回答能帮到小弟。如果您有任何问题，请在下方评论。祝兄弟好运

Answer 15

Flutter 在其 Android 和 Ios 文件夹中为每个应用程序都有自己的默认图标，因此我想展示几个更改应用程序图标的步骤。

前往 https://appicon.co/ 并使用生成您自己的图标图标图像（zip 文件包含两个主要文件夹 android 和 Assets.xcassets)
对于 android：进入 flutter 应用程序中的 android\app\src\main\res 并粘贴 android 文件夹内容。
对于 IOS：进入 flutter 应用中的 ios\Runner 并粘贴 Assets.xcassets 内容
重新启动您的模拟器或重建您的应用程序

Answer 16

最简单的方法是使用flutter_launcher_icons package but doesn't work perfectly so I prefer to use this website app icon为android和ios制作应用图标然后你只需要替换[=22=的mipmap文件夹] 在 android/app/src/main/res/ 下，资产 Assets.xcassets for IOS 在 ios/Runner/

Answer 17

试试 IconKitchen，Android Asset Studio 的继任者，以及为 Android、iOS 和网页。

Answer 18

上面许多答案中推荐的 flutter_launcher_icons 包现在已经有一段时间没有更新了，并且抛出一个未捕获的异常。

不过您可以使用包 icons_launcher。

更新pubspec.yaml

dev_dependencies:
  icons_launcher: ^1.1.7

flutter_icons:
  image_path: 'assets/ic_logo_border.png'
  ios: true
  android: true

运行包裹

flutter pub get
flutter pub run icons_launcher:main

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

How to change the application launcher icon on Flutter?

application-icon

dart

flutter

appicon

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

Android

iOS

如果您没有 Mac...