Flutter: 设置简单的启动屏

Posted 2022-03-28 ajanuw

更多代码参考

有短暂的白屏时间

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: '启动图demo',
      debugShowCheckedModeBanner: false,
      home: AnimatedSplashScreen(
        home: HomePage(),
      ),
    );
  


class AnimatedSplashScreen extends StatefulWidget 
  final Widget home;

  const AnimatedSplashScreen(Key key, @required this.home) : super(key: key);
  @override
  SplashScreenState createState() => new SplashScreenState();


class SplashScreenState extends State<AnimatedSplashScreen>
    with SingleTickerProviderStateMixin 
  AnimationController animationController;
  Animation<double> animation;
  Duration keepTimer = Duration(seconds: 3);
  int get showSecond => keepTimer.inSeconds;
  Timer timer;
  bool isSkip = false;

  startTime() async 
    await Future.delayed(keepTimer);
    _toHome();
  

  _toHome() 
    if (isSkip) return;
    isSkip = true;
    Navigator.of(context)
        .pushReplacement(MaterialPageRoute(builder: (context) => widget.home));
  

  @override
  void initState() 
    super.initState();
    animationController =
        AnimationController(vsync: this, duration: Duration(seconds: 2));
    animation =
        CurvedAnimation(parent: animationController, curve: Curves.easeOut);

    animation.addListener(() => this.setState(() ));
    animationController.forward();
    // startTime();
    Duration step = Duration(seconds: 1);
    timer = Timer.periodic(Duration(seconds: 1), (_) 
      setState(() 
        keepTimer -= step;
      );
      if (keepTimer == Duration.zero) 
        timer.cancel();
      
    );
  

  @override
  void dispose() 
    animationController?.dispose();
    timer?.cancel();
    SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
    super.dispose();
  

  @override
  Widget build(BuildContext context) 
    SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]);
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          Positioned(
            right: 10,
            bottom: 50,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: FlatButton(
                color: Colors.grey[300],
                textColor: Colors.white,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20),
                ),
                onPressed: _toHome,
                child: Text('跳过 $showSecond'),
              ),
            ),
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.end,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Padding(
                  padding: EdgeInsets.only(bottom: 30.0),
                  child: Image.asset(
                    'assets/images/powered_by.png',
                    height: 25.0,
                    fit: BoxFit.scaleDown,
                  ))
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Image.asset(
                'assets/images/logo.png',
                width: animation.value * 250,
                height: animation.value * 250,
              ),
            ],
          ),
        ],
      ),
    );
  


class HomePage extends StatefulWidget 
  @override
  _HomePageState createState() => _HomePageState();


class _HomePageState extends State<HomePage> 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('data'),
          onPressed: () async ,
        ),
      ),
    );