写点什么

Flutter 设置 App 的应用名字和应用 logo 图标的方法

作者:坚果前端
  • 2021 年 11 月 24 日
  • 本文字数:1129 字

    阅读完需:约 4 分钟

这里是坚果前端小课堂,大家喜欢的话,可以关注我的公众号“坚果前端,”,或者加我好友,获取更多精彩内容


在前面的几期给大家介绍了 flutter 的安装以及一些简单的配置,还运行了 helloword


那么接下来就带领大家了解如何设置应用名称以及图标

Flutter 设置 App 的应用名字和应用 logo 图标的方法,

知识点虽然简单,但是不知道这个知识点就不行,所以还是要记录下来,分享一下。


其实,Flutter 设置 App 的应用名称和图标是要分开来操作的,Android 和 iOS 是分开设置对应的 App 名称和图标的,这一点一定要注意。也可以把 Android 和 iOS 的应用名称和图标分开设置,可以设置不一样,但是毕竟一个 App 为了保证一致性,还是不要这样做,老老实实保证 Android 和 iOS 两个端的应用信息保持一致吧。


Flutter 在新建过程中,生成的 project name 是默认的应用名称,应用图标也是默认的,具体效果如下所示:


一、Flutter 中设置 Android 的应用名称和图标

这里把应用名称和图标放在一起介绍,具体操作如下所以。


1、首先要定位到修改应用名称的文件,有两种打开方式,


第一种方式就是用 VS Code 编辑器打开项目,然后找到项目里面的 Android 目录下的 Android—>app—>src—>main—>AndroidManifest.xml 文件,找到对应的位置进行修改;


第二种方式就是打开 Android Studio 编辑器打开项目里面的 Android 文件,依然是在 app—>src—>main—>AndroidManifest.xml 文件中进行修改,具体的操作如下所示:


(1)AndroidManifest.xml 文件中 application 下面的 label 对应的值就是应用的名称;



(2)AndroidManifest.xml 文件中 application 下面的 icon 对应的值就是应用的图标文件;


二、Flutter 中设置 iOS 的应用名称和图标

1、由于苹果的 icon 设置有点特殊,建议开发者直接通过 xcode 编辑器打开项目的 iOS 文件夹,然后在 xcode 编辑器里面进行 iOS 端的应用图标设置。由于我个人没有苹果电脑,不过也可以给大家提供一种方法


用 VS Code 编辑器打开项目,找到 iOS 目录下的 ios—>Runner—>Info.plist 文件,然后找到对应的设置应用名称的键值对进行设置;


(1)Info.plist 文件里面对应的含有 App 名字的键值对就是设置应用名称的地方;



(2)Assets.xcassets 文件里面的 AppIcon 里面对应的就是设置应用图标的地方;



设置完应用名称和图标的最终效果,如下所示:


三、Flutter 中设置 web 端的应用名称和图标

应用名称


index.html 中的 title



应用图标




最后在 main.dart 中默认有两个 title,你可以理解为第一个为应用内名称,第二个相当于 Activity 页面标题名称。


return new MaterialApp (    title: '坚果'   // 应用内名称    home: new Scaffold(        appBar: new AppBar(            title: new Text("坚果前端小课堂"),  // 页面标题名        ),    ),);
复制代码


好的,今天的分享到这儿就结束了,大家喜欢的话,可以点赞支持一下

发布于: 刚刚阅读数: 4
用户头像

坚果前端

关注

此间若无火炬,我便是唯一的光 2020.10.25 加入

公众号:“坚果前端”,51CTO博客首席体验官,专注于大前端技术的分享,包括Flutter,小程序,安卓,VUE,JavaScript。

评论

发布
暂无评论
Flutter设置App的应用名字和应用logo图标的方法