Flutter设置应用程序图标(9)

作者 : 慕源网 本文共1553个字,预计阅读时间需要4分钟 发布时间: 2021-11-13 共456人阅读

介绍

在本博客中,我们将学习如何更改 Flutter 应用程序的应用程序图标。应用程序图标是任何应用程序的第一印象,它应该引人注目。它在应用程序下载方面起着非常重要的作用。请注意,我说应用程序下载,用户仅通过看到您的应用程序图标来下载您的应用程序,但这取决于您的应用程序功能,用户将继续使用您的应用程序。

那么现在让我们看看如何在flutter中设置应用程序图标。

步骤

第1步

第一步也是基本的步骤是在 flutter 中创建一个新的应用程序。如果您是Flutter的初学者,请查看我的博客在 Flutter 中创建您的第一个应用程序。我创建了名为“flutter_app_icon”的应用程序

第2步

我找到了一个名为“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 。

第 3 步

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

第4步

现在,在 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

输出

Android  minSdkVersion = 16
创建默认图标 Android
添加新的 Android 启动器图标
用新图标覆盖默认的 iOS 启动器图标

第 5 步

下面是 pubspec.yaml 文件的代码,因此您可以更清楚地了解所有设置的放置位置。我用粗体突出显示了重要的代码行。

name: flutter_app_icon    
description: App Icon Demonstration.    
    
version: 1.0.0+1    
    
environment:    
 sdk: ">=2.1.0 <3.0.0"    
    
dependencies:    
 flutter:    
   sdk: flutter    
 cupertino_icons: ^0.1.2    
 flutter_launcher_icons: ^0.7.2+1    
    
dev_dependencies:    
 flutter_test:    
   sdk: flutter    
    
flutter_icons:    
 android: "launcher_icon"    
 ios: true    
 image_path: "assets/icon/icon.png"    
    
flutter:    
 uses-material-design: true 

第 6 步

运行代码并检查图标。如果您已经运行了该应用程序,则卸载该应用程序并重新运行它,这样您就可以找到放置在 assets/icon 文件夹中的应用程序图标。太好了,你又学到了 flutter 的另一个小而重要的东西。不断学习,不断分享……

结论

在这篇博客中,我们已经看到了在 flutter 中设置应用程序图标是多么容易。我发现一些开发人员通过手动替换所有现有图标来设置应用程序图标,这将花费更多时间,这不是一个好方法。这是在 flutter 中设置应用程序图标的推荐方法。 


慕源网 » Flutter设置应用程序图标(9)

常见问题FAQ

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录