Flutter 闪屏页(开屏页)

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_38520096/article/details/81748989

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)方法来设置加载网络图片。

---