飞溅/加载屏幕的最佳方式

Posted 2023-02-23

【中文标题】飞溅/加载屏幕的最佳方式

【英文标题】：Flutter best way for splash / loading screen

【发布时间】：2019-12-24 03:00:49

【问题描述】：

我有一个连接到 firebase (firestore) 的颤振应用程序。

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

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

谢谢！

【问题讨论】：

你试过这个flutter.dev/docs/development/ui/… 吗？

这取决于您的意思是应用程序启动和颤动加载其第一个视图或加载的应用程序以及从 api 加载内容之间的延迟。仅在加载应用程序时才应显示启动画面 - 打开应用程序时的（白色/灰色）背景。对于第二种情况，您可以使用 FutureBuilder 并使用 CircularProgressIndicator 类来显示加载动画。在从 Firebase 加载数据时，您还可以使用一些其他动画或任何其他小部件来显示。

【参考方案1】：

当您只加载本地图像并希望预加载它们时，Ashish Shirgave's answer 的替代方法是使用 Future.wait() + precacheImage() + snap.connectionState。

例如。

FutureBuilder(
   future: Future.wait([
      precacheImage(AssetImage("assets/imageA.png"), context),
      precacheImage(AssetImage("assets/imageB.png"), context),
   ]),
   builder: (BuildContext context, AsyncSnapshot snap) 
       if (snap.connectionState != ConnectionState.waiting) 
           return Center(AssetImage("assets/imageA.png"));
        else 
           return Center(child: CircularProgressIndicator());
       
   );

【参考方案2】：

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

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()。

【参考方案3】：

我认为最好的选择是FutureBuilder，因为您不知道具体需要多少时间，它会在您加载时显示加载动画

【参考方案4】：

我的解决方案是定义一个 Widget，它会显示加载动画并同时做一些后台工作。

小部件采用一个代表“加载动画”的小部件和一个将在后台执行的功能。

这取自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;
  

【讨论】：

不应该计算后台工作吗？

【参考方案5】：

您可以使用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...'),
)

【讨论】：

最好小心使用第三方插件。尽可能少地使用它们！ 迟早你会发现自己在使用已停产的第三方插件 - 它只是随着时间的推移而发生的。一旦停产的插件与最新的 Flutter 版本不兼容，你要么被旧的 Flutter 版本卡住，要么修复插件，或者迁移你的项目。沮丧和突然出现不必要的工作是过度依赖第三方插件的一定副作用。最好不要使用它们。