Flutter 定义一个闪屏页

最新推荐文章于 2024-05-10 13:13:32 发布

原创最新推荐文章于 2024-05-10 13:13:32 发布 · 907 阅读

0 ·

CC 4.0 BY-SA版权

Flutter 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了如何在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挑转去首页