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

Question

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

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

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

Answer 1

Flutter Launcher Icons旨在帮助快速生成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应用添加自适应启动器图标

Answer 2

按照简单的步骤:

1. 添加flutter_launcher_icons插件到pubspec.yaml

例如

dev_dependencies: 
  flutter_test:
    sdk: flutter

  flutter_launcher_icons: "^0.6.1"

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

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

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

$ flutter pub get

$ flutter pub pub run flutter_launcher_icons:main

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

希望这会有助于他人.

Answer 3

将启动器图标设置为本地开发人员

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

安卓系统

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

（图片摘自Android文档）

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

右键单击android项目大纲中的文件夹。转到新建>图片资产。现在，您可以选择图像以从中创建启动器图标。

注意：我通常使用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文件。

Answer 4

我在以下步骤中对其进行了更改：

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

 dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons: ^0.7.4

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

注意：（当然从

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

)

Answer 5

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

应用程序图标创建器

步骤 1：上传图像，

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

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

android/app/src/main/res

Answer 6

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

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

Answer 7

您必须使用自己的图像替换Flutter图标文件.这个网站将帮助您将您的png变成各种大小的启动器图标:

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

Answer 8

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

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

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

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

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

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

3. 现在，在 pubspec.yaml 中添加以下代码，

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

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

flutter pub run flutter_launcher_icons:main -f pubspec.yaml 

然后运行应用程序

Answer 9

没有任何包

安卓

1. 使用 Android Asset Studio 在 Flutter 项目的根目录中创建自适应启动器图标。

2. 将生成的启动器图标文件添加到项目android/app/src/main/res/mipmap-*/目录中。

3. 编辑该android/app/src/main/AndroidManifest.xml文件并在标签下方添加以下行：

<application android:icon="@mipmap/ic_launcher">

4. 运行flutter build apk命令以生成带有新启动器图标的 APK。

iOS系统

1. 使用App Icon Generator在 Flutter 项目的根目录中创建自适应应用程序图标。

2. 将生成的应用程序图标文件添加到项目ios/Runner/Assets.xcassets/AppIcon.appiconset/目录中。

3. 编辑该ios/Runner/Info.plist文件并在标签下方添加以下行：

<key>CFBundleIconName</key>
<string>AppIcon</string>

4. 运行 flutter build ios 命令以生成带有新启动器图标的 IPA。

Answer 10

flutter_launcher_icons：^0.13.1

将其添加到您的pubspec.yaml文件中

dev_dependencies:
  flutter_launcher_icons: "^0.13.1"

flutter_icons:
  android: "launcher_icon"
  ios: true
  image_path: "assets/icon/icon.png"
  min_sdk_android: 21 # android min sdk min:16, default 21
  # optionally, as transparency is not allowed on app store
  # remove_alpha_ios: true

添加此命令后运行以下命令command

$ flutter pub get

$ flutter pub run flutter_launcher_icons:main

Answer 11

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

不过，您可以使用图标_启动器包。

1. 更新 pubspec.yaml

dev_dependencies:
  icons_launcher: ^1.1.7

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

2. 运行包

flutter pub get
flutter pub run icons_launcher:main

Answer 12

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

分别更改iOS和Android模块中的图标。该插件会根据同一图标生成不同大小的图标，这些图标会变形。

请点击此链接： https: //flutter.dev/docs/deployment/android

Answer 13

按着这些次序：-

\n

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

\n

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

\n

pubspec.yaml

\n

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

\n

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

\n

我的终端

\n

[E:\\AndroidStudioProjects\\FlutterProject\\NewsFlutter\\news_flutter>flutter pub get\nRunning "flutter pub get" in news_flutter...                       881ms\n\nE:\\AndroidStudioProjects\\FlutterProject\\NewsFlutter\\news_flutter>flutter pub run flutter_launcher_icons:main\n  \xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\n     FLUTTER LAUNCHER ICONS (v0.8.0)\n  \xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\n\n\xe2\x80\xa2 Creating default icons Android\n\xe2\x80\xa2 Overwriting the default Android launcher icon with a new icon\n\n\xe2\x9c\x93 Successfully generated launcher icons\n

\n

Answer 14

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

\n

所以要更改flutter ios图标。首先获取图标 1024\xc3\x971024 像素的副本，并使用 easyappicon 生成器为 android 和 ios 生成一组图标。\n当你获取 zip 文件时，它可以创建两个文件夹 ios 和 android，打开 ios 文件夹并复制文件夹并替换你的 ios/runner 目录。

\n

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

\n

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

\n