Flutter 笔记 | 修改 App 图标、名称、启动页

vlambda
2020-05-20

Flutter 笔记 | 修改 App 图标、名称、启动页

第

次推文

LZ-Says

追随鸡老大，点滴积累～

Flutter 笔记 | 修改 App 图标、名称、启动页

前言

对于什么都不懂直接上手 Flutter 开发的小 Android 而言，想要保证进度的同时还能帮助公司小伙伴，只能晚上熬夜补裤裆，各种翻阅官方以及前辈的文章。

还是希望自己整理一份属于自己的东西，若干年后，点击查看，还能回想起现在艰辛讨生活的自己如何在帝都各种熬夜，然后和孩子吹牛逼～ 😂😂😂

动笔前，犹豫好久，要怎么样轰轰烈烈来篇记录呢？想想各位掘金大佬，还是不得瑟了，依旧项目情况，整理自己的 Flutter 笔记，然后慢慢进行了解 Flutter 吧～

附上之前基于 macOS 配置 Flutter 链接，方便日后自己查看：

加油呀，万一一不小心优秀了呢～

一、移动端 Icon 替换

1. Android 修改应用图标

通过 Android Studio 打开 Flutter 中 android Module，右键选择 “New ===> Image Asset”：

Flutter 笔记 | 修改 App 图标、名称、启动页

随后打开对应 Icon，调整大小：

Flutter 笔记 | 修改 App 图标、名称、启动页

此时会自动为你在不同的分辨率下生成对应的 Icon：

Flutter 笔记 | 修改 App 图标、名称、启动页

调整 AndroidManifest 文件：

<application android:name="io.flutter.app.FlutterApplication" android:icon="@mipmap/ic_launcher" android:label="studyapp"        android:roundIcon="@mipmap/ic_launcher_round"> <!-- 添加对于圆形 Icon 支持 -->

2. iOS 修改应用图标

找了个图标生成网站：

icon.wuruihong.com/

上传对应的 Icon 选择生成的一些基本参数，这里感觉默认就够用了：

Flutter 笔记 | 修改 App 图标、名称、启动页

随后选择默认开始生成：

Flutter 笔记 | 修改 App 图标、名称、启动页

随后查看效果，生成速度很快～

Flutter 笔记 | 修改 App 图标、名称、启动页

接下来用 Xcode 打开对应的 ios module，替换对应资源：

ios ===> Runner ===> Assets.xcassets ===> AppIcon.appiconset

Flutter 笔记 | 修改 App 图标、名称、启动页

随后替换 Contents.json 文件即可。

俩者一对比，还是 Android 好，哈哈哈～

二、移动端启动页处理

1. Android 修改启动页

Step 1：为 Android Style 中新增全屏样式：

<?xml version="1.0" encoding="utf-8"?><resources> <!-- Fullscreen Style --> <style name="FullScreenTheme" parent="@android:style/Theme.Black.NoTitleBar"> <item name="android:windowFullscreen">true</item></style>
 <!-- Theme applied to the Android Window while the process is starting --> <style name="LaunchTheme" parent="FullScreenTheme"> <!-- Show a splash screen on the activity. Automatically removed when Flutter draws its first frame --> <item name="android:windowBackground">@drawable/launch_background</item></style> <!-- Theme applied to the Android Window as soon as the process has started. This theme determines the color of the Android Window while your Flutter UI initializes, as well as behind your Flutter UI while its running.
 This Theme is only used starting with V2 of Flutter's Android embedding. --> <style name="NormalTheme" parent="FullScreenTheme"> <item name="android:windowBackground">@android:color/white</item></style></resources>

Flutter 笔记 | 修改 App 图标、名称、启动页

Step 2：修改 launch_background 文件

先把 UI 给你提供的启动页图片对应的放在 drawable 中。

随后开启定义你的启动页图片：

<?xml version="1.0" encoding="utf-8"?><!-- Modify this file to customize your launch splash screen --><layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@android:color/white" />
 <!-- You can insert your own image assets here --> <item> <bitmap android:gravity="fill" android:src="@drawable/launch_image" /> </item></layer-list>