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

简介: Flutter 设置 App 的应用名字和应用 logo 图标的方法,知识点虽然简单,但是不知道这个知识点就不行,所以还是要记录下来,分享一下。其实,Flutter 设置 App 的应用名称和图标是要分开来操作的,Android 和 iOS 是分开设置对应的 App 名称和图标的,这一点一定要注意。也可以把 Android 和 iOS 的应用名称和图标分开设置,可以设置不一样,但是毕竟一个 App 为了保证一致性,还是不要这样做,老老实实保证 Android 和 iOS 两个端的应用信息保持一致吧。

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

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

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


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


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


image.png

一、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 对应的值就是应用的名称;


image.png


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


image.png

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

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


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


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


image.png


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


image.png


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


image.png

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

应用名称


index.html 中的 title


image.png


应用图标


image.png



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


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

复制代码


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

相关文章
|
存储 Android开发
如何查看Flutter应用在Android设备上已被撤销的权限?
如何查看Flutter应用在Android设备上已被撤销的权限?
803 64
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
1155 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
1064 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
592 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
592 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
缓存
flutter3-wetrip跨平台自研仿携程app预约酒店系统模板
基于最新跨平台框架flutter3.x+dart3+getx+flutter_datepicker纯手写实战的一款仿去哪儿/携程旅游酒店预约客房app系统。
690 8
|
应用服务中间件 Go Android开发
通过外部链接启动 Flutter App(详细介绍及示例)
本文介绍了通过外部链接启动 Flutter App 的两种方式:`firebase_dynamic_links` 和 `app_links`。前者由 Firebase 提供,支持生成分享链接并自动处理未安装应用时的跳转(如跳转到应用商店),但已于2025年8月停止服务;后者则需开发者自行处理未安装应用时的重定向逻辑。文中详细说明了两者的配置步骤、代码实现及注意事项,推荐使用 `app_links` 进行新项目开发。
973 2
|
缓存 视频直播
flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
基于最新版flutter3.27+dart3.x+Getx+mediaKit原创实战研发抖音app带货商城项目。集成了直播+短视频+聊天三大功能模块。实现了类似抖音app首页全屏沉浸式联动左右滑动页面模块、上下滑动短视频。
845 1
|
10月前
|
缓存 移动开发 JavaScript
如何优化UniApp开发的App的启动速度?
如何优化UniApp开发的App的启动速度?
1599 139

热门文章

最新文章