Question

我有一个Flutter应用连接到Firebase（Firestore）。

当用户打开应用程序时，我会检查他是用户类型1还是用户类型2。+从网络等加载图像。

但是做所有这些事情可能需要一秒钟。制作/实现直到所有内容加载完毕的加载屏幕/启动屏幕的最佳方法是什么？

谢谢！

Answer 1

您可以使用Splashscreen插件，该插件提供seconds来延迟路由到下一页，以便您可以执行检查；它还具有一个navigateAfterSeconds，您可以在其中写入条件

示例：

SplashScreen(
  seconds: 3,
  navigateAfterSeconds: HomePage(),
  title: Text('Splash'),
  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0, color: Colors.blueGrey),),
  image: Image.asset('assets/images/icon2.png',),
  backgroundColor: Colors.white,
  styleTextUnderTheLoader: TextStyle(),
  photoSize: 100.0,
  loaderColor: Colors.blue,
  loadingText: Text('initializing...'),
)

Answer 2

我的解决方案是定义一个小部件，该小部件将显示加载动画并同时进行一些背景工作。

该小部件带有一个代表“正在加载动画”的小部件以及一个将在后台执行的功能。

这取自https://github.com/Ephenodrom/EZ-Flutter。

您可以在https://ez-flutter.de/docs/transition

中找到文档。

import 'package:flutter/material.dart';

///
/// Widget for displaying loading animation and doing background work at the same time.
///
class EzTransition extends StatefulWidget {
  EzTransition(this.child, this.toProcess, {this.backgroundColor});

  final Function() toProcess;
  final Widget child;
  final Color backgroundColor;

  @override
  _EzTransitionState createState() => _EzTransitionState();
}

class _EzTransitionState extends State<EzTransition> {
  @override
  void initState() {
    super.initState();
    widget.toProcess();
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      color: getBackgroundColor(),
      child: widget.child,
    );
  }

  Color getBackgroundColor() {
    return widget.backgroundColor == null
        ? Theme.of(context).backgroundColor
        : widget.backgroundColor;
  }
}

Answer 3

我相信最好的选择，因为您不确定要花多少时间，FutureBuilder会在加载时显示加载动画

Answer 4

其中一种方法是使用FutureBuilder。我在应用程序中使用的代码段如下所示：

FutureBuilder(
    future: _getData(), // the function to get your data from firebase or firestore
    builder : (BuildContext context, AsyncSnapshot snap){
        if(snap.data == null){
            //return loading widget
        }
        else{
            //return the widget that you want to display after loading
        } 
    }
);

AsyncSnapshot由函数在“未来”中返回，即在本例中为_getData（）。

扑动/飞溅屏幕的最佳方法

4 个答案: