在 Flutter 中无法更改加载变量

Question

我的加载变量有问题。

我有一个欢迎屏幕，它通过 Firebase 用户获得用户 UID，并从集合中获得字段名称。

所以我有以下代码：

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';

import '../widgets/app_drawer.dart';
import '../widgets/footer.dart';

class InitialScreen extends StatefulWidget {
  static const routeName = '/initial';  

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



class _InitialScreenState extends State<InitialScreen> {
   final _auth = FirebaseAuth.instance;
    var _nombre;
    var _isLoading = false;

 **void inputData() async {
   try {
     setState(() {
       _isLoading = true;
     });
      final FirebaseUser user = await _auth.currentUser();
      Firestore.instance
          .collection('users')
          .document(user.uid)
          .get()
          .then((value) {
        setState(() {
          _nombre = value['nombre']; 
          _isLoading = false;       
        });
      });
       setState(() {
          _isLoading = false;
        });
   } catch (err) {
        print(err);
      setState(() {
        _isLoading = false;
      });
   }
  }**
  

  @override
  Widget build(BuildContext context) {
    inputData();
    _isLoading = false;
    return  Scaffold(
      drawer: AppDrawer(),
      appBar: AppBar(
        title: Text('Macabeos'),
      ),
      body: _isLoading ? Text(_nombre) : Container(
        alignment: Alignment.topCenter,
        child: SingleChildScrollView(
                  child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: CircleAvatar(
                  backgroundImage: NetworkImage(
                      'https://firebasestorage.googleapis.com/v0/b/flutter-chat-8b2e0.appspot.com/o/others%2Ftaber.png?alt=media&token=0381a057-bf69-4885-8690-f25e6f1abfe0'),
                  radius: 80.50,
                  backgroundColor: Colors.transparent,
                ),
              ),
              Divider(),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 60.0),
                child: Text(
                  'Bienvenido Hermano:',
                  style: TextStyle(fontSize: 18),
                ),
              ),
              Divider(),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 60.0),
                child: Text(
                  _nombre,
                  style: TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              Divider(),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 60.0),
                child: Text(
                    'Ha Ingresado a MacabeosApp, en esta app manejara su Servicio con el Ministerio Macabeos.',
                    style: TextStyle(fontSize: 18)),
              )
            ],
          ),
        ),
      ),
      bottomNavigationBar: Footer(),
    );
  }
}

我通过这个函数获得信息：

void inputData() async {
   try {
     setState(() {
       _isLoading = true;
     });
      final FirebaseUser user = await _auth.currentUser();
      Firestore.instance
          .collection('users')
          .document(user.uid)
          .get()
          .then((value) {
        setState(() {
          _nombre = value['nombre']; 
          _isLoading = false;       
        });
      });
       setState(() {
          _isLoading = false;
        });
   } catch (err) {
        print(err);
      setState(() {
        _isLoading = false;
      });
   }
  }

然后在 Build 中调用来填充信息并用 Name Variable (_nombre) 填充 Text Widget。

我遇到的问题是：

════════ 小部件库捕获的异常════════════════════════════ ═══════ 在构建 InitialScreen(dirty, state: _InitialScreenState#1f7ab) 时抛出了以下断言： 必须向 Text 小部件提供非空字符串。 'package:flutter/src/widgets/text.dart': 断言失败：第 360 行第 10 行：'data != null'

当我检查问题出在哪里时，我发现它在文本小部件上，我认为问题是它正在从 Firebase 加载信息，但它仍未准备好，它显示一个红色屏幕，但在5 秒后它就会消失。

我使用 _isLoading 变量来检查它是否正在从 Firebase 接收信息，并且我希望在填充信息时显示一个圆形进度条，或者至少在最坏的情况下不显示红屏，有什么办法吗？

仅供参考，这个红色屏幕最多显示 2 秒或 5 秒，然后一切正常加载

Answer 1

首先，您没有使用 CircularProgressIndicator 并且您实际上没有正确使用 _isLoading。

body: _isLoading ? Center(child: CircularProgressIndicator()) : Container(...)

这就是您必须使用进度指示器的方式。 上面的代码渲染了一个 Text 小部件，数据在一段时间后传递，这就是红屏的原因。

您还应该从构建方法中删除 _isLoading。没用。

Answer 2

更新：我设法修复了它，因为在初始构建期间，应用程序正在从 Firebase 的文本中寻找一个值，所以我只是将 Init State 设置为等于表示正在加载的字符串并且成功了。

谢谢