如何在颤动中加载主屏幕时等待启动屏幕答案

【问题标题】：How to await splash screen while loading a home screen in flutter如何在颤动中加载主屏幕时等待启动屏幕
【发布时间】：2022-01-25 00:54:37
【问题描述】：

我的主页需要一些时间来加载所有资产，所以我想在那里添加一个启动画面，但它应该等待 3 秒（加载主屏幕的时间），所以我想用启动画面覆盖加载部分

【问题讨论】：

标签： flutter

【解决方案1】：

有一个包可以做到这一点，我将它用于现实世界的项目，设置很简单：https://pub.dev/packages/flutter_native_splash

硬重启并测试一下，它会在你的应用加载之前等待，然后启动画面会消失

【讨论】：

【解决方案2】：

使用这个包。 https://pub.dev/packages/flutter_native_splash 这将对您有所帮助。此初始屏幕将等到您的主屏幕或您设置的任何内容加载完毕

【讨论】：

【解决方案3】：

使用您自己的启动画面自定义图像或在这里设计新的。增加或减少时间，但时间越短越好

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"));
     
  }
}

【讨论】：

【解决方案4】：

您可以使用此方法将图像添加为启动画面，

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

如果你想增加或减少时间跨度，那么你可以改变这个

Timer(const Duration(seconds: 3).

【讨论】：

【解决方案5】：

您还可以在等待更昂贵的初始化时运行最小的 Flutter 应用程序。只需调用 runApp 两次！

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

是的，这是完全合法的，并且有据可查。

【讨论】：