Flutter: 设置简单的启动屏

有短暂的白屏时间

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',
                 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 {},
        ),
      ),
    );
  }
}

配置xml

文档

λ flutter --version
Flutter 1.12.17-pre.61 • channel master • https://github.com/flutter/flutter.git
Framework • revision 1c7a1c3873 (4 hours ago) • 2019-12-04 07:51:54 +0100
Engine • revision 3e6d6bc612
Tools • Dart 2.7.0 (build 2.7.0-dev.2.1 19fc1016da)

添加启动图 androidappsrcmain esdrawableg.png
修改androidappsrcmain esdrawablelaunch_background.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/holo_blue_light" />

    <!-- You can insert your own image assets here 删除下面的注释 -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/bg" />
    </item>
</layer-list>