从firebase获取数据时如何显示加载屏幕答案

【问题标题】：How to show a loading screen when fetching data from firebase从firebase获取数据时如何显示加载屏幕
【发布时间】：2021-12-10 15:14:37
【问题描述】：

这是我使用 firebase 登录用户的代码部分，现在我想在从 firebase 获取数据时显示加载屏幕。

Container(
                  width: 376,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    gradient: LinearGradient(
                      colors: <Color>[
                        Colors.black12,
                        Colors.blue,
                        Colors.black12,
                      ]
                    )
                  ),
                  child: TextButton(
                      onPressed: () async{
                   if(key.currentState!.validate()){
                    await FirebaseAuth.instance.signInWithEmailAndPassword(email: User_email_id.text, password: user_Passowrd.text)
                        .then((value) => {
                          Navigator.push(
                            context,
                            MaterialPageRoute(builder: (context)=>Page_First())
                          )
                    }).catchError((e){
                      Fluttertoast.showToast(msg: e!.message);
                    });
                   }
                      },
                      child: Text(
                        'Sign-in',
                        style: TextStyle(
                          fontSize: 17,
                          color: Colors.white,
                        ),
                      ),
                  ),
                ),

【问题讨论】：

我会研究 FutureBuilder：api.flutter.dev/flutter/widgets/FutureBuilder-class.html

标签： firebase flutter dart

【解决方案1】：

首先，将 boolean isLoading = false 添加到类的顶部。然后将 firebase 加载代码移动到单独的 Future 中，如下所示：

Future<void> loadFirebase(BuildContext context) async {
    await FirebaseAuth.instance.signInWithEmailAndPassword(email: User_email_id.text, password: user_Passowrd.text)
        .then((value) => {
      Navigator.push(
          context,
          MaterialPageRoute(builder: (context)=>Page_First())
      )
    }).catchError((e){
      Fluttertoast.showToast(msg: e!.message);
    });
  }

当按钮被按下时应该调用这个函数。同时，isLoading 应设置为 true。最后，在构建您的小部件时，如果 isLoading 为 true，则添加一个显示加载屏幕的条件。

isLoading == true ? LoadingContainer() : Container(content with button);

【讨论】：