Flutter 闪屏页实现

Flutter 闪屏页实现

导入图片

在lib同级目录新建images目录，放入闪屏图片。

更新配置文件

打开pubspec.yaml文件，添加如下asstes:

assets:
-images/splash_girl.png

创建两个页面

lib下新建HomePage和SplashPage，分别作为主页和闪屏页。

编写mian.dart

main.dart做一个逻辑，直接启动闪屏页，并且提供一个跳转到主页的路由。

import 'package:flutter/material.dart';
import 'SplashPage.dart';
import 'HomePage.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Todo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new SplashPage(), // 闪屏页
routes: { // 路由
'/HomePage': (BuildContext context) => new HomePage()
},
);
}
}

这里使用了MaterialApp控件，home为默认打开的页面，routes为配置的路由。

编写SplashPage.dart

创建一个StatefulWidget控件，当控件initState以后开始倒计时，倒计时结束后进入HomePage。异步倒计时使用Dart的Future处理。

import 'dart:async';
import 'package:flutter/widgets.dart';

class SplashPage extends StatefulWidget {
@override
State createState() {
return _SplashPageState();
}
}

class _SplashPageState extends State<SplashPage> {
@override
Widget build(BuildContext context) {
return new Image.asset("images/splash_girl.png");
}

@override
void initState() {
super.initState();
countDown();
}

// 倒计时
void countDown() {
var _duration = new Duration(seconds: 3);
new Future.delayed(_duration, go2HomePage);
}

void go2HomePage() {
Navigator.of(context).pushReplacementNamed('/HomePage');
}
}

随便写一个HomePage.dart

主页中间显示文字Home Page.

import 'package:flutter/widgets.dart';

class HomePage extends StatefulWidget {
@override
State createState() {
return new _HomePage();
}
}

class _HomePage extends State<HomePage> {
@override
Widget build(BuildContext context) {
return new Center(
child: new Text("Home Page"),
);
}
}

参考：

Flutter 控件之 MaterialApp:http://blog.chengyunfeng.com/?p=1041
Dart异步处理:https://segmentfault.com/a/1190000008800122