-
前言
启动页是App必不可少的一部分，然而在一个新创建的Flutter项目中，运行发现是没有启动页的。在开发android 、ios原生项目时，android是要在进入主页前加载一个覆盖页作为启动页，ios是要给LaunchScreen配置图片。同理，在Flutter的android 、ios中要去分别配置。实际开发中，因为业务不同的关系，有的只需要每次展示固定启动页就好，有的则需要嵌入一些广告，所以启动页又大致分为两种：固定启动页、固定启动页+广告页。
开发环境：
[✓] Flutter (Channel stable, 2.10.3, on macOS 12.3 21E230, locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 13.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.1)
：
 android-original.gif
|
 ios-original.gif
|
|---|
-
固定启动页
1. android：
Android原生的白屏问题可以通过为 Launcher Activity 设置 windowBackground 解决，而 Flutter 也是基于此办法，同时优化了 Flutter 初始化阶段的白屏问题（覆盖一个launchView）。之所以新建的项目是白屏，因为flutter对此的方法默认是注释掉的，如下图所示：
将drawable和drawable-v21中注释掉的都放开，并添加launch_image启动页图片：
修改后效果如下：
2. iOS：
从2020年四月起提交至App Store的app，必须使用Xcode的Storyboard搭建启动页。在这条新规下，我们就不能使用原来的Assets.xcassets➡️LaunchImage来设置启动图了，必须换成LaunchScreen.storyboard来实现。
1、以下是试验过程，大致浏览即可。实际操作请看第2点。
LaunchScreen.storyboard默认状态如下：
运行发现，还是有白屏出现：
2、最终操作
- 参照“调整约束1.png”
-
添加一张5.5寸的启动图（因为宽度最大）在本地而不是Assets，并将填充模式设为等比例填充，如下图所示：
5.5.png
最终效果如下：
-
固定启动页+广告页
实际业务中，进入App就执行的接口大致会配置一个广告图片url，配置了广告的话，url='xxx', 不配置 url=""。根据url的值设置它显示与否。建议在Profile模式下运行，最接近打包后的状态。代码如下：
1. mian.dart
import 'home_page.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
// //默认启动页
// return MaterialApp(
// title: 'Flutter Demo',
// theme: ThemeData(primarySwatch: Colors.blue,),
// home: MyHomePage(),
// );
//网络启动页
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(primarySwatch: Colors.blue,),
home: SplashPage(),
routes: <String, WidgetBuilder>{ // 路由
'/index': (BuildContext context) => MyHomePage()
},
);
}
}
2. splash_screen.dart
import 'package:flutter/material.dart';
import 'dart:ui' as ui show window;
import 'package:flutter_lauch_demo/widgets/skip_down_time_progress.dart';
class SplashPage extends StatefulWidget {
const SplashPage({Key? key}) : super(key: key);
@override
State<SplashPage> createState() => _SplashPageState();
}
class _SplashPageState extends State<SplashPage> {
String netImgUrl='';
@override
void initState() {
super.initState();
//模拟广告图接口请求
Future.delayed(Duration(microseconds: 1000), (){
netImgUrl='https://img2.baidu.com/it/u=1170834292,3580907519&fm=253&fmt=auto&app=138&f=JPG?w=500&h=889';
// netImgUrl='';
//有广告页：netImgUrl不为空
if(netImgUrl.length>0){
/**刷新页面使广告图显示**/
setState(() {});
//无广告页：netImgUrl为空""
}else{
/**跳转到主页**/
Future.delayed(Duration(microseconds: 10), goIndexPage);
}
});
}
@override
Widget build(BuildContext context) {
return Stack(children: <Widget>[
Container(
constraints: BoxConstraints.expand(),
color: Colors.white,
child: netImgUrl.length>0?
Image.network(netImgUrl, fit: BoxFit.fill)
:Image.asset("images/splash.png", fit: BoxFit.fill)//未请求回来之前，用启动页图片作为占位图
),
//倒计时：跳过
Visibility(
visible: netImgUrl.length>0,
child: Positioned(
child: SkipDownTimeProgress(
color: Colors.red,
radius: 22.0,
duration: Duration(seconds: 5),
size: Size(25.0, 25.0),
skipText: "跳过",
onTap: () => goIndexPage(),
onFinishCallBack: (bool value) {
if (value) goIndexPage();
}),
top: MediaQueryData.fromWindow(ui.window).padding.top + 20,
right: 30),
)
]);
}
// 跳转主页
void goIndexPage(){
print('进入了主页......');
Navigator.of(context).pushReplacementNamed('/index');
}
}
3. netImgUrl不为空，效果如下：
 android-network.gif
|
 ios-network.gif
|
|---|
4. netImgUrl为空，效果如下：
 android-network-urlnull.gif
|
 ios-network-urlnull.gif
|
|---|
-
效果对比与总结
android-original.gif
|
ios-original.gif
|
|---|
 android-general.gif
|
 ios-general.gif
|
|---|
（url="xxx"）
android-network.gif
|
ios-network.gif
|
|---|
（url=""）
android-network-urlnull.gif
|
ios-network-urlnull.gif
|
|---|
Demo地址：：flutter_lauch_demo
