当页面数据未从 Firebase 完全加载时显示加载指示器/微调器 - Flutter

Question

在我的 Flutter 应用中，当我点击表单屏幕中的保存按钮时，我使用 ModalProgressHUD 显示一个微调器，一旦数据成功写入 Firebase，它就会停止微调器。

我有这个屏幕，它使用 Listview.builder 显示我所有费用的列表，我想在页面显示后立即自动显示微调器，并在 Firebase 中的所有数据完全加载后停止微调器。

我在执行此操作时需要帮助。我已经粘贴了我的代码摘录，如下所示。提前致谢。

//class wide declaration
bool showSpinner = true;



Widget build(BuildContext context) {

ExpenseNotifier expenseNotifier = Provider.of<ExpenseNotifier>(context);


Future<void> _resfreshList() async {
  expenseNotifier.getExpenses(expenseNotifier);
  var expenseList = ExpenseNotifier.getExpenses(expenseNotifier);
  if (expenseList != null) {
    setState(() {
      showSpinner = false;
    });
}

    return Scaffold(
      body: ModalProgressHUD(
            inAsyncCall: showSpinner,
            child: RefreshIndicator(
              onRefresh: _resfreshList,
              child: Consumer<ExpenseNotifier>(
                builder: (context, expense, child) {
                  return expense == null
                      ? Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: <Widget>[
                            PaddingClass(bodyImage: 'images/empty.png'),
                            SizedBox(
                              height: 20.0,
                            ),
                            Text(
                              'You don\'t have any expenses',
                              style: kLabelTextStyle,
                            ),
                          ],
                        )
                      : ListView.separated(
                          itemBuilder: (context, int index) {
                            var myExpense = expense.expenseList[index];
                            return Card(
                              elevation: 8.0,
                              color: Colors.white70,
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.start,
                                children: <Widget>[
                                  RegularExpenseTextPadding(
                                    regText:
                                        '${_formattedDate(myExpense.updatedAt)}',
                                  ),
                                  Container(
                                    margin: EdgeInsets.all(20.0),
                                    padding: const EdgeInsets.all(15.0),
                                    decoration: BoxDecoration(
                                      borderRadius:
                                          BorderRadius.all(Radius.circular(5.0)),
                                      border: Border.all(
                                          color: kThemeStyleBorderHighlightColour),
                                    ),
                                    child: Row(
                                      children: <Widget>[
                                        Expanded(
                                          flex: 5,
                                          child: Column(
                                            crossAxisAlignment:
                                                CrossAxisAlignment.start,
                                            children: <Widget>[
                                              Text(
                                                '${myExpense.amount}',
                                                style: kRegularTextStyle,
                                              ),
                                              SizedBox(
                                                height: 20.0,
                                              ),
                                              Text(
                                                myExpense.description,
                                                style: kRegularTextStyle,
                                              ),
                                            ],
                                          ),
                                        ),
                                        Expanded(
                                          flex: 1,
                                          child: GestureDetector(
                                            onTap: () {
                                              expenseNotifier.currentExpense =
                                                  expenseNotifier
                                                      .expenseList[index];
                                              Navigator.of(context).push(
                                                  MaterialPageRoute(builder:
                                                      (BuildContext context) {
                                                return ExpenseDetailsScreen();
                                              }));
                                            },
                                            child: Icon(
                                              FontAwesomeIcons.caretDown,
                                              color: kThemeIconColour,
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                            );
                          },
                          separatorBuilder: (BuildContext context, int index) {
                            return SizedBox(
                              height: 20.0,
                            );
                          },
                          itemCount: expenseNotifier.expenseList.length,
                        );
                },
              ),
            ),
          ),
    );
    }
  

Answer 1

这是我的应用程序中的一个示例：

bool _isLoading = false; <- default false
  bool _isInit = true; <- to mae it only load once


@override
  void initState() {

if (_isInit) {
     // activating spinner
      _isLoading = true;

      // your function here <------

    _isInit = false;
    super.initState();
  }

Initstate 在用户可以看到您的应用中的任何类型之前被调用，因此这是加载您的 Firebase 数据的理想场所。只要您收到数据，加载微调器就会显示上面的这个逻辑。然后你的身体看起来像下面这样：

@override
  Widget build(BuildContext context) {

    return _isLoading <- is loading condition true? shows spinner
        ? Center(child: CircularProgressIndicator()) <- loading spinner
    // else shows your content of the app
    : SafeArea(
        child: Container()
            ....