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

当我用flutter create命令创建应用程序时,颤振标志被用作两个平台的应用程序图标。

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

或者是否可以将图像定义为颤振的资产并且图标以某种方式生成?

452296 次浏览

您必须将Flutter图标文件替换为您自己的图像。这个网站将帮助你把你的png转换成各种大小的启动器图标:

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

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日星期三,你应该能够创建新的图标,而不覆盖旧的现有启动器图标在你的颤振项目。

更新2:从v0.4.0(2018年6月8日)开始,你可以为你的Android图标指定一个图像,为你的iOS图标指定一个单独的图像。

更新3:作为v0.5.2(2018年6月20日),你现在可以为你的Flutter项目的Android应用程序添加自适应启动图标

遵循简单的步骤:

1.添加flutter_launcher_icons Plugin到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 < / p >

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

$ flutter pub get

$ flutter pub run flutter_launcher_icons:main

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

更新:

flutter_launcher_icons 0.8.0版本(2020年9月12日)有增加口味支持

flavor通常用于为不同的环境(如devprod)构建应用程序

社区写了一些文章和软件包,您可能会觉得有用。这些文章解决了iOS和Android的口味。

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

分别修改iOS和Android模块的图标。 这个插件用一个变形的图标生成不同大小的图标

点击以下链接: https://flutter.dev/docs/deployment/android < / p >

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

我在使用和理解flutter_launcher_icons包时遇到了一些麻烦。如果你是面向Android或iOS平台创造应用,你将如何做到这一点。一旦你做过几次,这是非常快速和简单的。

安卓

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

enter image description here

(图片改编自Android文档)

为Android创建启动器图标最简单的方法是使用Android Studio中提供的Asset Studio。你甚至不需要离开颤振项目。(VS Code用户,在这一步你可以考虑使用Android Studio。这真的非常方便,熟悉另一个IDE也无妨。)

右键单击项目大纲中的android文件夹。转到新比;形象资产。(如果你没有看到形象资产作为一个选项,尝试右键单击android/app文件夹。更多建议请参见下面的评论。)现在你可以选择一个图像来创建你的启动器图标。

我通常使用1024x1024像素的图像,但你当然应该 使用任何比512x512更小的东西。如果你正在使用Gimp或Inkscape,你 应该有两个图层,一个为前景,一个为 背景。前景图像应该有透明的区域

enter image description here

(lion clipart from here)

这将取代当前的启动器图标。你可以在mipmap文件夹中找到生成的图标:

如果你想手动创建启动器图标,请参阅这个答案寻求帮助。

最后,确保AndroidManifest中的启动器图标名称与上面所调用的名称相同(默认为ic_launcher):

application android:icon="@mipmap/ic_launcher"

在模拟器中运行应用程序,确认启动器图标已成功创建。

iOS

我过去总是手动单独调整我的iOS图标的大小,但如果你有一台Mac, Mac应用商店中有一个名为图标集创建器的免费应用程序。你给它一个图像(至少1024x1024像素),它会吐出你需要的所有大小(加上Contents.json文件)。感谢这个答案的建议。

iOS图标不应该有任何透明度。参见更多指南在这里

创建图标集后,启动Xcode(假设你有一台Mac),并使用它打开Flutter项目中的ios文件夹。然后转到跑步比;Assets.xcassets并删除AppIcon项。

enter image description here

然后右键单击并选择进口…。选择刚才创建的图标集。

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

如果你没有Mac…

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

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

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

应用程序图标创建者 .

步骤1:上传图片

步骤2:做必要的修改,然后点击下载(不要更改文件名)

步骤3:解压下载的Zip文件在相应的文件夹

android/app/src/main/res

最好的,推荐在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。

  1. 在项目的根目录assets中创建一个文件夹assets,也可以创建一个文件夹图标,并将您的应用程序图标放在这个文件夹中。我将推荐给用户1024x1024的应用程序图标大小。我已经把应用程序图标放在图标文件夹内,现在我有应用程序图标路径为assets/icon/icon.png

  2. 现在,在pubspec。Yaml添加下面的代码,

flutter_icons:
android: "launcher_icon"
ios: true
image_path: "assets/icon/icon.png"
  1. 保存文件并在终端上运行flutter pub get。运行命令后,运行第二条命令,如下所示
flutter pub run flutter_launcher_icons:main -f pubspec.yaml

然后运行App

您可以通过使用pubspec.yaml中的flutter_launcher_icons来实现这一点

另一种方法是android和iOS各使用一个

我按照以下步骤进行了修改:

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

 dev_dependencies:
flutter_test:
sdk: flutter
flutter_launcher_icons: ^0.7.4

2)你必须在你的项目上上传一个你想要作为启动器图标的图像/图标。(我已经在我的项目中创建了一个文件夹名称:image,然后在image文件夹中上传logo.png)。现在您必须添加以下代码并将图像路径粘贴到pubspec中的image_path:上。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-

标记为正确答案的那个是不够的,你还需要一个步骤,在终端中输入这个命令来创建图标:

Flutter pub运行flutter_launcher_icons:main

遵循以下步骤:-

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

分类文件夹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_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

我使用很少的方法来更换颤振应用程序lancher图标,但只有手动方法是有点容易和好。因为你会知道它是如何运作的。

因此更改flutter ios图标。首先得到你的图标1024×1024像素的副本,并生成一组图标的android和ios使用appicon。有限公司发电机。 当你得到压缩文件,它工作创建两个文件夹ios和android打开ios文件夹和复制文件夹,并替换一个在你的ios/runner目录

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

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

  • 你可以通过这个链接来使用flutter_launcher_icons 0.9.0
  • 如果你需要如何在flutter 看看这个中更改图标启动器的演示
我希望我的回答能帮助到你,兄弟。如果你有任何问题,请在下方评论。 祝你好运,兄弟

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

  1. 转到https://appicon.co/并使用 图标图像(zip文件包含两个主要文件夹安卓Assets.xcassets < / >强)
  2. 对于android:在你的flutter应用程序中进入android主要\ app \ src \ \ res,并在那里粘贴android文件夹内容。
  3. 对于IOS:进入您的flutter应用程序的ios \跑步,并在那里粘贴Assets.xcassets 李内容< / >
  4. 重新启动模拟器或重新构建应用程序😁

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

尝试IconKitchen, Android Asset Studio的继承者,和一个伟大的新方法,为Android, iOS和web制作高度自定义的应用程序图标。

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

你可以使用包icons_launcher代替。

  1. 更新pubspec.yaml
dev_dependencies:
icons_launcher: ^1.1.7


flutter_icons:
image_path: 'assets/ic_logo_border.png'
ios: true
android: true
  1. 运行包
flutter pub get
flutter pub run icons_launcher:main

flutter_launcher_icons: ^0.10.0

将此添加到pubspec.yaml文件中

dev_dependencies:
flutter_launcher_icons: "^0.10.0"


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

如果您想将图像设置为颤振应用程序启动器,可以从介质中跟踪此站点

https://medium.com/@psyanite/ how-add-app-launch-icons-influtt-bd92b0e0873a

没有任何包装

安卓

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

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

  3. 编辑android/app/src/main/AndroidManifest.xml文件,并在标签下面添加以下一行:

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

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

iOS

  1. 在Flutter项目的根目录中使用应用图标生成器创建一个自适应应用程序图标。

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

  3. 编辑ios/Runner/Info.plist文件,并在标签下面添加以下一行:

<key>CFBundleIconName</key>
<string>AppIcon</string>
  1. 运行flutter build ios命令生成带有新启动器图标的IPA。