解决Flutter启动页白屏问题

• 前言

启动页是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对此的方法默认是注释掉的，如下图所示：

launch_background.png

将drawable和drawable-v21中注释掉的都放开，并添加launch_image启动页图片：

配置android启动页.png

修改后效果如下：

android-general.gif

2. iOS：

从2020年四月起提交至App Store的app，必须使用Xcode的Storyboard搭建启动页。在这条新规下，我们就不能使用原来的Assets.xcassets➡️LaunchImage来设置启动图了，必须换成LaunchScreen.storyboard来实现。

1、以下是试验过程，大致浏览即可。实际操作请看第2点。

LaunchScreen.storyboard默认状态如下：

LaunchScreen默认状态.png

给LaunchImage配置图片：

LaunchImage.png

因默认约束是"内容居中"，这导致图片不能完整展示。所以调整imagview尺寸并重新添加约束：

调整约束1.png

调整约束2.png

运行发现，还是有白屏出现：

ios-LaunchImage.gif

2、最终操作

1. 参照“调整约束1.png”

2. 添加一张5.5寸的启动图（因为宽度最大）在本地而不是Assets，并将填充模式设为等比例填充，如下图所示：

   
   
   5.5.png

最终效果如下：

ios-general.gif

• 固定启动页+广告页

实际业务中，进入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: { // 路由
       '/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 createState() => _SplashPageState();
}

class _SplashPageState extends State {

 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: [

      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