准备
Logo-Android
48x48、72x72、96x96、144x144、192x192
Logo-iOS
20@2x、20@3x、
29x29@1x、29@2x、29@3x、
40@2x、40@3x、40@2x、40@3x、
1024*1024(注:1024需要透明和不透明各一套)
Launch-Android
450x800、720x1280、1080x1920
Launch-iOS
750x1334、1242x2208、1125*2436、828x1792、1242x2688
一:修改应用名称
1.1android
在项目下找到android目录,依次app》src》main》AndroidManifest.xml,
打开AndroidManifest.xml文件,找到application节点,修改label参数即可
<application
android:name="io.flutter.app.FlutterApplication"
android:icon="@mipmap/ic_logo"
android:label="Flutter App Name">
</application>
1.2ios
在项目下找到ios目录,依次Runner》Info.plist,
打开Info.plist文件,参数都是key-string的形式,找到CFBundleName,修改参数即可
<dict>
<key>CFBundleName</key>
<string>Fultter App Name</string>
</dict>
二:修改应用图标
2.1android
在项目下找到android目录,依次app》src》main》res,然后会有一组mipmap开头的目录,即不同目录存放不同的图标大小,把我们不同大小的图标分别放在对应的目录中。
打开AndroidManifest.xml文件,找到application节点,修改icon参数即可
<application
android:name="io.flutter.app.FlutterApplication"
android:icon="@mipmap/ic_logo"
android:label="">
</application>
mipmap-hdpi - 72*72
mipmap-mdpi - 48*48
mipmap-xhdpi - 96*96
mipmap-xxhdpi - 144*144
mipmap-xxxhdpi - 192*192
2.2ios
在项目下找到ios目录,依次Runner》Assets.xcassets》AppIcon.appiconset,然后会有一组后缀为1x、2x、3x的图标,根据尺寸存放即可。
在同级目录的Contents.json文件中修改自己的配置
ios的图标尺寸较多,可以根据Contents.json文件中的配置挨个去修改,或者只修改通用的即可
三:启动页
3.1android
3.1.1AndroidManifest.xml里设置theme:
<application> <activity
android:theme="@style/LaunchTheme">
<meta-data
android:name="io.flutter.app.android.SplashScreenUntilFirstFrame" android:value="true" /> <intent-filter> <action android:name="android.intent.action.MAIN"/> <category android:name="android.intent.category.LAUNCHER"/> </intent-filter> </activity></application>
3.1.2value/styles.xml
<resources> <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar"> <!-- Show a splash screen on the activity. Automatically removed when
Flutter draws its first frame --> <item name="android:windowBackground">@drawable/launch_background</item> </style></resources>
3.1.3drawable/launch_background.xml
<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="@mipmap/launch_image" /> </item></layer-list>
默认是注释掉的,把启动图放到mipmap目录下,去掉注释,Android的启动页就设置好了。
3.2ios
iOS需要生成不同尺寸的启动图,这里推荐一个在线生成启动图和icon的网站:https://icon.wuruihong.com/
上传1024× 1024的icon图片就可以生成各种尺寸的icon,启动图是在蓝湖上直接生成3个尺寸:1x(375 × 750),2x(750 × 1500),3x(1125 × 2250),图片资源放在Runner/Assets.xcassets目录下,icon图片放在AppIcon.appiconset 目录,启动图放在 LaunchImage.imageset目录,可以在Xcode里面直接拖入图片,也可以把图片拷贝到上面的两个目录中,并且修改Contents.json文件,如果用图标工场生成图片的话,可以直接替换上面的两个文件夹。
Flutter启动页
首先我们要导入资源图片
把图片放在assets/images目录下
然后在 pubspec.yaml 文件声明资源路径:
flutter:
# To add assets to your application, add an assets section, like this:
# assets:
# - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg
assets:
- assets/images/
在 main.dart 跳转到启动页
import 'package:flutter/material.dart';
import 'page/splash_page.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
//去除右上角的Debug标签
debugShowCheckedModeBanner: false,
home: new SplashPage(), //启动页
);
}
}
启动页splash_page.dart
import 'package:flutter/material.dart';
import 'dart:async';
import 'home_tab_page.dart';
//启动页
class SplashPage extends StatefulWidget {
@override
State<StatefulWidget> createState() => _SplashPageState();
}
class _SplashPageState extends State<SplashPage> {
@override
void initState() { super.initState(); startHome(); }
//显示2秒后跳转到
HomeTabPage startHome() async {
await Future.delayed(const Duration(milliseconds: 2000), () {
Navigator.pushReplacement( context,
MaterialPageRoute(builder: (context) => HomeTabPage()),
); }); }
@override
Widget build(BuildContext context) {
return Scaffold(
body: Image.asset( "assets/images/launch_image.png",
width: double.infinity,
height: double.infinity,
fit: BoxFit.fill, ), ); }}