我必须两次进入这个屏幕才能在 flutter 中从 fetchAndSet 加载数据

Question

当我第一次访问该页面时，它只是显示 circularProgressIndicator。当我第二次访问该页面时返回后，circularProgressIndicator 出现并且其他 listview.builder 完美出现。我已经更新了相关代码。非常感谢任何形式的帮助。

FutureBuilder(
  future: Provider.of<AppointmentsProvider>(context, listen: false)
      .fetchAndSetAvailableSlots(),
  builder: (ctx, snapShot) => Column(
    children: [
      Container(
        margin: EdgeInsets.all(5),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          color: Colors.blue,
        ),
        child: SizedBox(
          height: 380,
          child: snapShot.connectionState == ConnectionState.waiting
              ? Center(
                  child: CircularProgressIndicator(
                    color: Colors.white,
                  ),
                )
              : ListView.builder(
                  itemCount: list.length,
                  itemBuilder: (ctx, i) => Card(
                    elevation: 5,
                    margin: EdgeInsets.all(10),
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10.0)),
                    child: CheckboxListTile(
                      secondary: Icon(
                        Icons.alarm,
                      ),
                      activeColor: Colors.green,
                      // checkColor: Colors.black,
                      selectedTileColor: Colors.blue,
                      // tileColor: Colors.greenAccent,
                      title: Text(list[i].time),
                      value: list[i].isSelected,
                      onChanged: (value) {
                        onCheckChanged(list[i], list, value);
                      },
                    ),
                  ),
                ),
        ),
      ),
      ElevatedButton.icon(
        onPressed: () async {
          await Firebase.initializeApp();
          FirebaseFirestore.instance.collection('appointments').add({
            'id': DateTime.now().toString(),
            'date': widget.formatDate,
            'description': 'description etc.',
            'type': 'type etc.',
            'uid': 'uid etc.',
            'timeSlot': timeSlot,
          });
        },
        icon: Icon(Icons.arrow_forward),
        label: Text('Add Now!'),
      ),
    ],
  ),
);

---这里是fetchAndSet函数---

Future<void> fetchAndSetAvailableSlots() async {
await Firebase.initializeApp();
QuerySnapshot<Map<String, dynamic>> data = await FirebaseFirestore.instance
    .collection('appointments')
    .where('date', isEqualTo: 'Dec 11, 2021')
    .get();
List<TimeSlot> bookedSlots = [];

data.docs.forEach(
  (element) async {
     FirebaseFirestore.instance.collection('Questions').doc(userId).get();
    DocumentSnapshot<Map<String, dynamic>> item = await FirebaseFirestore
        .instance
        .collection('appointments')
        .doc('${element.id}')
        .get();

    bookedSlots
        .add(TimeSlot(isSelected: false, time: item.data()['timeSlot']));
  },
);
availableTimeSlots = bookedSlots;
print(bookedSlots);
notifyListeners();

}

Answer 1

首先我建议搬家

Firebase.initializeApp();

进入你的 runApp 函数。

关于您的第二个问题，您似乎正在使用 Provider。如果是这样，我建议传递一个 bool 加载来确定是否等待获取数据仍然是运行。 Futurebuilder/Streambuilder 也有助于显示该数据。如果获取数据，您的问题听起来像小部件不会重建

Answer 2

在 returnListView.builder 之前检查列表。如果列表为空，则 return CircularProgressIndicator()，如果列表获得一些数据，则 return 列表视图。另一方面，将数据添加到 setState() 中的 bookSlots 列表。

我必须两次进入这个屏幕才能在 flutter 中从 fetchAndSet 加载数据

I have to go to this screen twice to load data from fetchAndSet in flutter

provider

flutter