阅读 2402

Flutter 闪屏页实现

导入图片

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

flutter\_splash1

更新配置文件

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

assets:
-images/splash_girl.png
复制代码

flutter\_splash2

创建两个页面

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

flutter\_splash3

编写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: <String, WidgetBuilder>{ // 路由
'/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<StatefulWidget> 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<StatefulWidget> createState() {
return new _HomePage();
}
}

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

参考:

Flutter 控件之 MaterialApp:blog.chengyunfeng.com/?p=1041

Dart异步处理:segmentfault.com/a/119000000…

文章分类
Android