【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:
  - 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,
      ),
    );
  }
}

源码地址:

https://github.com/JairusTse/FlutterDemo

推荐阅读更多精彩内容