如何在 flutter 中加载主屏幕时等待启动画面

Question

my homepage is taking sometime to load all asset, so I want to add a splash screen there, but it should wait for 3 second (the time that take load home screen), so I wanna cover the loading section with splash screen

Answer 1

Use this packages. https://pub.dev/packages/flutter_native_splash This will help you. This splash screen will wait until your homescreen or whatever you set is loading

Answer 2

There is package that does exactly that, I use it for real world projet, the setup is easy: https://pub.dev/packages/flutter_native_splash

Do a hard restart and test out, It will wait before your app is loaded and then the splash screen will disappear

Answer 3

You can add a image as a splashscreen using this method,

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    Timer(
        Duration(seconds: 5),
        () => Navigator.pushReplacement(
            context, MaterialPageRoute(builder: (context) => Home())));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              color: Color.fromRGBO(20, 172, 168, 1),
            ),
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Expanded(
                flex: 2,
                child: Container(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      CircleAvatar(
                          backgroundColor: Colors.white,
                          radius: 60.0,
                          child: new Image.asset(
                            'assets/images/tree.jpg',
                            width: 70,
                            height: 90,
                          )),
                      Padding(
                        padding: EdgeInsets.only(top: 10.0),
                      ),
                      Text(
                        'Your Text here!!',
                        style: TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                            fontSize: 24.0),
                      )
                    ],
                  ),
                ),
              ),
              Expanded(
                flex: 1,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    CircularProgressIndicator(),
                    Padding(
                      padding: EdgeInsets.only(top: 20.0),
                    ),
                    Text(
                      'Your Text here!!',
                      softWrap: true,
                      textAlign: TextAlign.center,
                      style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 18.0,
                          color: Colors.white),
                    )
                  ],
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}

And if you want to increase or decrease the time span then you can change this

Timer(const Duration(seconds: 3).

Answer 4

Use you own custom image of splashscreen or design new one here.increase or decrease time but less time is better

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    startTime();
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    Size size = MediaQuery.of(context).size;
    return SafeArea(
      child: Scaffold(
        body: new Stack(
          alignment: Alignment.center,
          children: <Widget>[
            Center(
              child: new Image.asset(
                'assets/images/splash.png',
                width: size.width,
                height: size.height,
                fit: BoxFit.fill,
              ),
            ),
          ],
        ),
      ),
    );
  }
  startTime() async {
    var _duration = new Duration(seconds: 5);
    return new Timer(_duration, navigationPage);
  }
  void navigationPage() {


        Navigator.pushAndRemoveUntil(
            context,
            MaterialPageRoute(builder: (context) => DashBoardScreen()),
            ModalRoute.withName("/login"));
     
  }
}

Answer 5

You can also have a minimal Flutter app running while you await the more expensive initialization. Just call runApp twice!

void main () async {
  runApp(SomethingAnimated());
  await longTaskOne();
  await longTaskTwo();
  await longTaskThree();
  runApp(MyRealTopLevel();
}

Yes this is perfectly legal and documented.