Flutter 闪屏页(开屏页)
先来说一下我们需要实现的效果,我们需要实现一个三秒钟后自动跳转到主页面的一个开屏页面,且该页面如果用户点击了屏幕后我们需要立即跳过开屏页面。到了主页面后用户点击返回时直接退出程序而不是跳转回开屏页面。
- 新建images文件夹用于存放图片(把images文件夹建在根目录下即可)
- 为图片配置路径
- 编写main.dart让其开启第一个页面为开屏页面
- 编写开屏页面
- 编写主页面,这里我也就不写了,主页面想是什么样自己随便写即可
(1)新建images文件夹用于存放图片(把images文件夹建在根目录下即可)
(2)为图片配置路径
找到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
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
# To add assets to your application, add an assets section, like this:
# assets:
# - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg
assets:
- images/splash_img.jpg
(3)编写main.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: 'FlutterDemo',
routes: <String,WidgetBuilder>{//配置路径
'/HomePage':(BuildContext context) => new HomePage(),
},
theme: new ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or press Run > Flutter Hot Reload in IntelliJ). Notice that the
// counter didn't reset back to zero; the application is not restarted.
primarySwatch: Colors.blue,
),
home: new SplashPage()
);
}
}
(4)编写开屏页面
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:flutter_demo/view/HomePage.dart';
class SplashPage extends StatefulWidget{
SplashPage({Key key}):super(key:key);
@override
_SplashPage createState()=> new _SplashPage();
}
class _SplashPage extends State<SplashPage>{
bool isStartHomePage = false;
@override
Widget build(BuildContext context) {
// TODO: implement build
return new GestureDetector(
onTap: goToHomePage,//设置页面点击事件
child: Image.asset("images/splash_img.jpg",fit: BoxFit.cover,),//此处fit: BoxFit.cover用于拉伸图片,使图片铺满全屏
);
}
//页面初始化状态的方法
@override
void initState() {
super.initState();
//开启倒计时
countDown();
}
void countDown() {
//设置倒计时三秒后执行跳转方法
var duration = new Duration(seconds: 3);
new Future.delayed(duration, goToHomePage);
}
void goToHomePage(){
//如果页面还未跳转过则跳转页面
if(!isStartHomePage){
//跳转主页 且销毁当前页面
Navigator.of(context).pushAndRemoveUntil(new MaterialPageRoute(builder: (context)=>new HomePage()), (Route<dynamic> rout)=>false);
isStartHomePage=true;
}
}
}
(5)编写主页面,这里我也就不写了,主页面想是什么样自己随便写即可
写在末尾
到此为止我们的开屏页面也就写完了,如果你的图片不是来至于本地,你还可以使用Image.network(src)方法来设置加载网络图片。