flutter实现闪屏

最新推荐文章于 2025-03-10 14:57:56 发布

Hello攻城狮

最新推荐文章于 2025-03-10 14:57:56 发布

阅读量1.4k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： flutter

本文链接：https://blog.youkuaiyun.com/weixin_42912237/article/details/93873438

flutter 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何使用Flutter创建应用的启动画面，并实现从闪屏到主页面的自动跳转。通过设置状态栏样式、倒计时跳转及自定义闪屏界面，展示了一个完整的Flutter应用启动流程。

效果：
在这里插入图片描述
1.创建main.dart(运行主界面)、SplashPage(闪屏界面)、HomePage（系统主界面）
2.在mian.dart中加入：

import 'package:flutter/material.dart';
import 'SplashPage.dart';
import 'dart:io';
import 'package:flutter/services.dart';

void main() {
  runApp(new MyApp());
  if (Platform.isAndroid) {
//    沉浸状态栏
    SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(statusBarColor: Colors.transparent);
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: '',
      debugShowCheckedModeBanner: false,
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new SplashPage(), // 闪屏页
    );
  }
}

3.在SplashPage加入：

import 'dart:async';
import 'package:bbl/HomePage.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter/material.dart';

class SplashPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: _SplashPage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class _SplashPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _SplashPageState();
  }
}

class _SplashPageState extends State<_SplashPage> {
  Timer timer;
  var count = 3;

  @override
  Widget build(BuildContext context) {
    return new Stack(children: <Widget>[
      new Image.asset(
        "images/ping.jpg",
        width: double.infinity,
        height: double.infinity,
        fit: BoxFit.cover,
      ),
      new Positioned(
        top: 20.0,
        right: 10.0,
        child: new FlatButton(
          child: new Text(
            '跳过 ${count}',
            style: new TextStyle(color: Colors.white),
          ),
          color: Color.fromARGB(55, 0, 0, 0),
          onPressed: () {
            goHomePage();
          },
        ),
      ),
    ]);
  }

  @override
  void dispose() {
    timer.cancel();
    super.dispose();
  }

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

  //倒计时
  void countDown() {
    timer = new Timer(new Duration(seconds: 1), () {
      // 只在倒计时结束时回调
      if (count != 1) {
        setState(() {
          count = count - 1;
          countDown();
        });
      } else {
        timer.cancel();
        goHomePage();
      }
    });
  }

//  跳转主页
  void goHomePage() {
    Navigator.of(context).pushAndRemoveUntil(
        new MaterialPageRoute(builder: (context) => new HomePage()),
        (route) => route == null);
  }
}

4.在HomePage加入：

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        debugShowCheckedModeBanner: false, home: new MainPageWidget());
  }
}

class MainPageWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new MainPageState();
  }
}

class MainPageState extends State<MainPageWidget> {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Color.fromARGB(255, 153, 204, 0),
      ),
      debugShowCheckedModeBanner: false,
      home: new Scaffold(
         body: Center(child: Text("主页"),),
        ),
      );
  }

}

5.完成