【Android开发学Flutter】启动页
Flutter App启动的时候，如果没有启动页，会出现白屏一段时间，影响用户体验，所以建议是加上启动页的。
Android的启动页也是很常见的功能，不过Flutter开发的App添加启动页处理还是有些不一样。可以看下Flutter中文网的说明：更新启动页
其中最大的区别是：
在Flutter框架加载时，Flutter会使用本地平台机制绘制启动页。此启动页将持续到Flutter渲染应用程序的第一帧时。
意思是会先绘制Android/iOS的启动页，然后过度到Flutter的第一个页面。如果想要在启动页进行耗时操作或者指定显示时间，需要同时实现Android/iOS的启动页和Flutter启动页。
Android启动页
需要注意3个地方：
- AndroidManifest.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>
- value/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>
- drawable/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的启动页就设置好了。
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文件，如果用图标工场生成图片的话，可以直接替换上面的两个文件夹。
image.png
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<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,
),
);
}
}
