当使用 Flutter 加载主要内容时，如何处理并摆脱堆栈小部件顶部的加载屏幕？

Question

我有一个脚手架，里面有一个 Google 地图小部件。我试图从网络服务中获取一些数据，初始化一些变量，然后当创建地图并且页面准备就绪时，我将“loadingStatus”变量设置为“LoadingStatus.done”以向用户显示页面。

页面加载时（loadingStatus 为 LoadingStatus.loading），我向用户展示基本的加载屏幕。

return Stack(
  children: [
    MapBody(),  
    LoadingBody()
  ],
);

加载完成后，加载小部件的不透明度设置为 0，并且我忽略对该小部件的点击，以便用户可以单击堆栈底部的小部件。问题是，这个 LoadingBody 小部件仍然存在，位于堆栈顶部，使用设备资源。

Widget LoadingBody(){

    return IgnorePointer(
      ignoring: loadingStatus == LoadingStatus.loading ? false : true,
      child: AnimatedOpacity(
        duration: const Duration(milliseconds: 500),
        opacity: loadingStatus == LoadingStatus.loading ? 1 : 0,
        child: Container(
          color: chargeDarkGrey,
          child: Center(
            child: Lottie.asset(
              "assets/loading.json",
              repeat: true
            )
          ),
        ),
      ),
    ); 
  }

在加载过程完成并且我的基本屏幕已经启动后，如何才能完全摆脱这个带有炫酷淡入淡出动画的 LoadingBody 小部件？如果我使用像 FutureBuilder 或只是 setState 这样的东西，我无法设置任何过渡动画，因此用户必须看到谷歌地图小部件的错误创建。

Answer 1

尝试用

Visibility

小部件包装它，它会用资源隐藏当前小部件

Widget LoadingBody(){

return IgnorePointer(
  ignoring: loadingStatus == LoadingStatus.loading ? false : true,
  child: AnimatedOpacity(
    duration: const Duration(milliseconds: 500),
    opacity: loadingStatus == LoadingStatus.loading ? 1 : 0,
    child: Visibility(
      visible:  loadingStatus == LoadingStatus.loading,
      child: Container(
        color: chargeDarkGrey,
        child: Center(
            child: Lottie.asset(
                "assets/loading.json",
                repeat: true
            )
        ),
      ),
    ),
  ),
);

}