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

Question

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

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

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

score 448 · Accepted Answer

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

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

我希望在 GitHub README 中添加一个视频来演示它

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

如果有人想提出改进建议/报告错误，请将其作为问题添加到 GitHub 项目中。

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

更新 2：从 v0.4.0（2018 年 6 月 8 日）开始，您可以为您的 Android 图标指定一个图像，为您的 iOS 图标指定一个单独的图像。

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

score 341 · Accepted Answer

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

我在使用和理解flutter_launcher_icons包时遇到了一些麻烦。如果您在本地创建适用于 Android 或 iOS 的应用程序，那么这个答案就是您将如何做到的。一旦你完成了几次，它就非常快速和容易。

安卓

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

（图片改编自Android 文档）

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

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

注意：我通常使用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）并使用它打开iosFlutter 项目中的文件夹。然后转到Runner > Assets.xcassets并删除 AppIcon 项。

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

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

如果你没有Mac...

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

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

score 243 · Accepted Answer

遵循简单的步骤：

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 设置不同的图标，请参阅此

更新：

flutter_launcher_icons 0.8.0版本（2020 年 9 月 12 日）增加了风味支持

风味通常用于为不同的环境构建您的应用程序，例如dev和prod

社区已经写了一些你可能会觉得有用的文章和包。这些文章介绍了 iOS 和 Android 的风格。

score 40 · Accepted Answer

您必须将 Flutter 图标文件替换为您自己的图像。该站点将帮助您将 png 转换为各种大小的启动器图标：

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

score 40 · Accepted Answer

我已按以下步骤对其进行了更改：

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

 dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons: ^0.7.4

2）您必须在您的项目上上传一个图像/图标，您希望将其视为启动器图标。（我在我的项目中创建了一个文件夹名称：图像，然后将 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) 完成

注意：（当然添加更新的依赖项

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

)

score 34 · Accepted Answer

我建议你使用下面链接的这个网站

应用图标创建者

第 1 步：上传图片，

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

第 3 步：在相应文件夹中提取下载的 Zip 文件

android/app/src/main/res

score 21 · Accepted Answer

在 Flutter 中设置 App Icon 的最佳和推荐方式。

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

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

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

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

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

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

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

flutter pub run flutter_launcher_icons:main -f pubspec.yaml

然后运行应用程序

score 11 · Accepted Answer

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

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

score 4 · Accepted Answer

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

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

按照这个链接： https ://flutter.dev/docs/deployment/android

score 4 · Accepted Answer

您可以通过此链接使用flutter_launcher_icons 0.9.0
如果您需要有关如何在颤振中更改图标启动器的演示，请查看此

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

score 2 · Accepted Answer

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

颤振酒吧运行颤振启动器图标：主要

score 2 · Accepted Answer

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

或者，您可以使用以下步骤手动执行此操作。此步骤包括将这些占位符图标替换为您的应用程序图标：

安卓

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

iOS

查看iOS 应用图标指南。
在 Xcode 项目导航器中，选择Assets.xcassets文件Runner夹。使用您自己的应用程序图标更新占位符图标。
通过使用flutter run.

score 2 · Accepted Answer

按着这些次序：-

1.在pubspec.yaml文件中添加flutter_luncher_icons的依赖。你可以从这里找到这个插件。

2.在asstes 文件夹和pubspec.yaml文件中添加所需的图像，如下所示。

发布规范.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

score 2 · Accepted Answer

我使用很少的方法来更改 Flutter 应用程序 lancher 图标，但只有手动方法有点简单和好。因为你会知道它是如何工作的。

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

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

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

score 0 · Accepted Answer

简单的方法是使用 flutter_launcher_icons包，但不能完美运行所以我更喜欢使用这个网站应用程序图标来制作android和ios的应用程序图标然后你只需要替换android/app/src/main/mipmap下的ANDROID文件夹res/和ios/Runner/Assets.xcassets下的IOS 资产

score 0 · Accepted Answer

试试IconKitchen，它是 Android Asset Studio 的继承者，它是一种为 Android、iOS 和 Web 制作高度可定制的应用程序图标的绝佳新方法。

score -1 · Accepted Answer

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

另一种方法是将一个用于 android，另一个用于 iOS

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

17 回答 17

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

安卓

iOS

如果你没有Mac...

Related

Reference