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

Question

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

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

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

Answer 1

Flutter Launcher Icons旨在帮助快速生成适用于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图标指定一个图像，为iOS图标指定单独的图像。

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

Answer 2

遵循简单的步骤：

将<span>插件添加到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
在终端上执行命令以创建应用程序图标：

e.g. icon/icon.png

$ flutter pub get

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

希望这对其他人有帮助。

Answer 3

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

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

Android

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

（图片摘自Android documentation）

为Android创建启动器图标的最简单方法是使用Android Studio（抱歉VSCode用户）可以使用的Asset Studio。您甚至不必离开Flutter项目。

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

注意：我通常使用1024x1024像素的图片，但您当然应该使用不小于512x512的东西。如果您使用的是Gimp或Inkscape，则您应该有两层，一层用于前景，一层用于背景。前景图像应具有透明区域显示的背景图层。

（来自here的狮子剪贴画）

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

如果您希望手动创建启动器图标，请参见this answer以获得帮助。

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

application android:icon="@mipmap/ic_launcher"

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

iOS

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

iOS图标不应具有任何透明度。查看更多准则here。

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

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

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

如果您没有Mac ...

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

您需要的图像大小是文件名中的乘以大小。例如，Icon-App-29x29@3x.png将是29的{{1}}倍，即3个像素平方。您要么需要保留相同的图标名称，要么编辑JSON文件。

Answer 4

您必须使用自己的图像替换Flutter图标文件。该网站将帮助您将您的png变成各种尺寸的启动器图标：

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

Answer 5

我总是更改您提到的目录中的图标。我不知道有什么机制可以让你为你生成图标。

Answer 6

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 7

您可以通过 this link

flutter_launcher_icons 0.9.0

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

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

Answer 8

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

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

关注此链接： https://flutter.dev/docs/deployment/android

Answer 9

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

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）完成

N.B ：（当然是从

添加更新的依赖项

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

）

Answer 10

创建新的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项目导航器中，在Assets.xcassets文件夹中选择Runner。使用您自己的应用程序图标更新占位符图标。
通过使用flutter run运行应用来验证图标已被替换。

Answer 11

请按照以下步骤操作：-

1.在pubspec.yaml文件中添加flutter_luncher_icons的依赖。你可以从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 12

我使用了几种方法来更改 flutter 应用程序 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 13

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

App Icon Creator

第1步：上传图片，

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

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

android/app/main/src/res

Answer 14

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

flutter pub运行flutter_launcher_icons：main

Answer 15

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

How To Set App Icon In Flutter

Answer 16

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

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

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

16 个答案:

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

Android

iOS

如果您没有Mac ...