【Android开发学Flutter】启动页

Flutter App启动的时候，如果没有启动页，会出现白屏一段时间，影响用户体验，所以建议是加上启动页的。

Android的启动页也是很常见的功能，不过Flutter开发的App添加启动页处理还是有些不一样。可以看下Flutter中文网的说明：更新启动页

其中最大的区别是：

在Flutter框架加载时，Flutter会使用本地平台机制绘制启动页。此启动页将持续到Flutter渲染应用程序的第一帧时。

意思是会先绘制Android/iOS的启动页，然后过度到Flutter的第一个页面。如果想要在启动页进行耗时操作或者指定显示时间，需要同时实现Android/iOS的启动页和Flutter启动页。

Android启动页

需要注意3个地方：

• AndroidManifest.xml里设置theme：

• value/styles.xml

• drawable/launch_background.xml

默认是注释掉的，把启动图放到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 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://github.com/JairusTse/FlutterDemo