Flutter App启动的时候，如果没有启动页，会出现白屏一段时间，影响用户体验，所以建议是加上启动页的。
Android的启动页也是很常见的功能，不过Flutter开发的App添加启动页处理还是有些不一样。可以看下Flutter中文网的说明：更新启动页
其中最大的区别是：
在Flutter框架加载时，Flutter会使用本地平台机制绘制启动页。此启动页将持续到Flutter渲染应用程序的第一帧时。
意思是会先绘制Android/iOS的启动页，然后过度到Flutter的第一个页面。如果想要在启动页进行耗时操作或者指定显示时间，需要同时实现Android/iOS的启动页和Flutter启动页。
Android启动页
需要注意3个地方：
AndroidManifest.xml里设置theme：
...
android:theme="@style/LaunchTheme">
android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
android:value="true" />
value/styles.xml
@drawable/launch_background
drawable/launch_background.xml
android:gravity="fill"
android:src="@mipmap/launch_image" />
默认是注释掉的，把启动图放到mipmap目录下，去掉注释，Android的启动页就设置好了。
iOS启动页
iOS需要生成不同尺寸的启动图，这里推荐一个在线生成启动图和icon的网站：图标工场，上传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启动页
首先我们要导入资源图片，具体可以看：在Flutter中添加资源和图片
把图片放在assets/images目录下:
flutter:
- android:
- ios:
- assets:
- launch_image.png
然后在 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 createState() => _SplashPageState();
}
class _SplashPageState extends State {
@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,
),
);
}
}
源码地址：
https://www.jianshu.com/p/dab213be2138
分享到：更多