ChatGPT解决这个技术问题 Extra ChatGPT

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

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

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

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

你可以用两种方式更新 appicon,我提到了两种方式检查 here
Here 使用 appicon.co 生成不同图标的新解决方案。这篇文章的好处在于它包含了 Web、macOS 和 Windows。

M
Mark O'Sullivan

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

将包添加到您的 pubspec.yaml 文件(在您的 Flutter 项目中)以使用它

在 pubspec.yaml 文件中指定您希望用于应用程序的图标的路径,然后选择是否要将图标用于 iOS 应用程序、Android 应用程序或两者。

运行包

瞧!默认启动器图标现已替换为您的自定义图标

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

可以找到展示如何运行该工具的视频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 应用添加自适应启动器图标


对图片有要求吗?
您对 image_path 图像有推荐的图像尺寸吗?
我只找到了一种尺寸的参考,710x599。选择它的原因是什么?无论如何,我会期待 512x5121000x1000 或其他东西。
@Suragch 刚刚在 Google 上快速搜索了一个图标,所以我可以快速测试它。我添加了另外两个图标尺寸,以便人们可以试用该软件包(1024x1024 和 128x128),您可以在此处找到这些:github.com/fluttercommunity/flutter_launcher_icons/tree/master/…
我可以建议包 read.me 应该提供有关图像大小的建议吗?
S
Suragch

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

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

安卓

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

https://i.stack.imgur.com/CJ3aB.png

(图片改编自 Android documentation

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

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

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

https://i.stack.imgur.com/DL2VV.png

(来自 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 项。

https://i.stack.imgur.com/lb9io.png

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

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

如果你没有Mac...

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

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


@MarkO'Sullivan,谢谢。我的猜测是包装很好。只是文档对我来说很难理解。例如,初始图像使用什么尺寸,为 Android 创建的背景层等等。有一个详细的教程来指导初学者完成整个过程真的很有帮助。
这有帮助。在 Android Studio 中,没有添加图像资源的选项。我从 github/flutter 问题中学到的解决方法是在 Android Studio 中将 /android 文件夹(在 Flutter 项目中)作为标准的单独“Android”项目打开。当您右键单击 /res 文件夹时,该选项将出现。
@MwamiTovi 是对的,但是您需要等待 gradle 同步才能右键单击甚至手动同步,否则不会显示“新 -> 图像资产”。
在最新版本的 android studio 上右键单击 android 和 android/app 文件夹后,我找不到 New>Image Asset 选项。
对我来说,当我点击 New >图像资产,没有任何反应。对于遇到此问题的任何人,只需转到文件 >打开,导航到你的flutter项目的“android”文件夹并打开它。等待 Android Studio 同步(我花了大约 2 分钟)。加载后,打开“app”文件夹,右键单击“res”文件夹,然后新建>图像资产。这对我有用。 (来源:github.com/flutter/flutter-intellij/issues/…
D
Dharman

遵循简单的步骤:

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 日)添加了风味支持

风味通常用于为不同的环境(例如 devprod)构建您的应用程序

社区已经写了一些你可能会觉得有用的文章和包。这些 articles 解决了适用于 iOS 和 Android 的风格。


这对我有用;只有一次我会运行最后一行 flutter pub pub run flutter_launcher_icons:main。谢谢你的提示!
我收到错误 android.dart:164:25: Error: Too many positional arguments: 1 allowed, but 4 found.
如果激活了暗模式,我可以切换图标吗?
@ir2pid 解决错误,您需要将版本更新为 flutter_launcher_icons: 0.7.5
只是一个奇怪的问题:为什么是 pub pub 而不是 pub
p
paul polash

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

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-

)


C
Collin Jackson

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

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


您的链接只会为 Android 图标生成正确的大小
M
Mahesh Jamdade

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

App Icon Creator

第 1 步:上传图片,

第2步:进行必要的更改并单击下载(不要更改文件名)

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

android/app/src/main/res

这个建议对IOS没有帮助
也适用于 ios,使用 xcode 添加 xassets
请问我们如何为 ios 做到这一点
y
yardstick17

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

我找到了一个名为flutter_launcher_icons的插件来在flutter中设置应用程序图标。我们可以使用这个插件在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 

然后运行应用程序


尽管您回答了相同的旧正确答案,但至少您突出了其中的要点。
R
Rohan

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

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


为什么在原生时使用插件;)
不,我不是在谈论插件,我正在分享链接以生成图标,稍后我们将在本机代码中使用它。
我这样做了,但我的图标看起来像一个正方形,并没有填满圆形。有小费吗?
嘿@TenDigitGrid,您可以使用android studio轻松做到这一点。打开 android->app->src->main->res 并右键单击 res 文件夹,然后选择 New,然后选择 Image Assets,然后您将获得图像资产配置向导。他们单击源资产路径并选择您的图标,您将为您的图标获得各种不同的配置
R
Raj Yadav

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

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

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


R
Rahul Kushwaha

按着这些次序:-

1.pubspec.yaml 文件中添加 flutter_luncher_icons 的依赖项。您可以从 here 找到此插件。

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

J
Jupiter Cls

您可以通过此链接使用 flutter_launcher_icons 0.9.0

如果您需要有关如何在颤振中更改图标启动器的演示,请查看此

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


T
Tavares

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

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


您可以编辑正确答案或添加评论。事实上,这个答案可能很快就会得到-1
@RobertoAllende Perheaps 他不能用他的少量积分进行编辑。
Z
Zakria Khan

我使用很少的方法来更改 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 上替换文件夹后,停止应用程序并重新运行,您的图标将被更改。


A
Ali Behzadian Nejad

试试 IconKitchen,它是 Android Asset Studio 的继任者,这是一种为 Android、iOS 和网络制作高度可定制的应用图标的绝佳新方法。


A
Amina Bekir

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


D
D J

上面许多答案中推荐的 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

M
Malik A. Abualzait

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

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


关注公众号,不定期副业成功案例分享
关注公众号

不定期副业成功案例分享

领先一步获取最新的外包任务吗?

立即订阅