Flutter 定义一个闪屏页

本文详细介绍了如何在Flutter中创建一个闪屏页面,包括代码示例和关键步骤。通过使用Duration进行倒计时,实现3秒后自动跳转至首页的功能。

前言

flutter展示一个闪屏页,这个也是我们项目的第一步
图片展示

代码部分

import 'package:flutter/material.dart';
import 'package:flutter_blog/conf/PageColors.dart';
import 'package:flutter_blog/conf/PageDimens.dart';
import 'dart:io';
import 'package:flutter/services.dart';
import 'package:flutter_blog/view/main/MainIndexPage.dart';
import 'package:flutter_blog/widget/PageWidget.dart';

void main() {
  runApp(MainPageApp());
  if (Platform.isAndroid) {
    SystemUiOverlayStyle systemUiOverlayStyle =
    SystemUiOverlayStyle(statusBarColor: Colors.transparent);
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
  }
}

class MainPageApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  PageWidget _pageWidget;

  var _splashStyle = new TextStyle(
      color: PageColors.titleColor,
      fontSize: PageDimens.font18,
      letterSpacing: PageDimens.dimen4,
      wordSpacing: PageDimens.dimen4);

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

  @override
  Widget build(BuildContext context) {
    _pageWidget = new PageWidget();
    return Scaffold(
      backgroundColor: PageColors.mainColor,
      body: new Center(
        child: new Column(
          children: <Widget>[
            new Expanded(
              child: _pageWidget.m(
                new Text(
                  '您好,今天是${_getCurrTime()},很高兴与你相遇 ^_^',
                  style: _splashStyle,
                  textAlign: TextAlign.center,
                ),
                a: Alignment.center,
                l: PageDimens.dimen20,
                r: PageDimens.dimen20,
              ),
              flex: 3,
            ),
            new Expanded(
              child: new Row(
                children: <Widget>[
                  Image.asset(
                    'images/ic_logo.jpg',
                    width: PageDimens.dimen60,
                    height: PageDimens.dimen60,
                  ),
                  _pageWidget.m(
                      new Text(
                        '小屋',
                        style: new TextStyle(
                            textBaseline: TextBaseline.alphabetic,
                            fontSize: PageDimens.font20,
                            fontWeight: FontWeight.w300,
                            color: PageColors.titleColor),
                      ),
                      l: PageDimens.dimen10)
                ],
                mainAxisAlignment: MainAxisAlignment.center,
              ),
              flex: 1,
            )
          ],
        ),
      ),
    );
  }

  /// 获取当前年月日
  String _getCurrTime() {
    DateTime now = new DateTime.now();
    int year = now.year;
    int month = now.month;
    int day = now.day;
    return '$year-$month-$day';
  }

  /// 开启倒计时
  void _startCountDown() {
    var _duration = new Duration(seconds: 3);
    new Future.delayed(_duration, _toMainIndexPage);
  }

  /// 跳转去首页
  void _toMainIndexPage() {
    Navigator.of(context).push(new MaterialPageRoute(builder: (_) {
      return new MainIndexPage();
    }));
  }
}

方法详解

 /// 开启倒计时
  void _startCountDown() {
    var _duration = new Duration(seconds: 3);
    new Future.delayed(_duration, _toMainIndexPage);
  }

  /// 跳转去首页
  void _toMainIndexPage() {
    Navigator.of(context).push(new MaterialPageRoute(builder: (_) {
      return new MainIndexPage();
    }));
  }

使用Duration开启倒计时,3秒后执行 _toMainIndexPage挑转去首页

Flutter闪屏可以通过Flutter的启动流程来实现。在Flutter中,应用程序的入口是main()函数,在main()函数中,我们可以使用Flutter提供的WidgetsFlutterBinding.ensureInitialized()方法来初始化Flutter的绑定。 在初始化完成后,我们可以使用Navigator.pushReplacement()方法来实现闪屏的效果。具体步骤如下: 1.在main()函数中,初始化Flutter的绑定: void main() async { WidgetsFlutterBinding.ensureInitialized(); ... } 2.创建闪屏的Widget,并在Widget的build()方法中调用Navigator.pushReplacement()方法: class SplashScreen extends StatelessWidget { @override Widget build(BuildContext context) { Future.delayed(Duration(milliseconds: 3000), () { Navigator.pushReplacement( context, MaterialPageRoute(builder: (context) => HomePage()), ); }); return Scaffold( backgroundColor: Colors.white, body: Center( child: Text( 'Splash Screen', style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold), ), ), ); } } 在上面的代码中,我们使用Future.delayed()方法来延迟3秒钟,然后调用Navigator.pushReplacement()方法来跳转到主。在实际开发中,我们可以根据需要设置延迟时间。 3.在main()函数中,调用runApp()方法并传入闪屏的Widget: void main() async { WidgetsFlutterBinding.ensureInitialized(); runApp(MaterialApp(home: SplashScreen())); } 这样,当应用程序启动时,就会显示闪屏,延迟一定时间后自动跳转到主
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值