在内部使用动画时，FutureBuilder 未完成

Question

我有一个 FutureBuilder，用于从 Firestore 中检索数据。正如这里经常建议的那样，我在 initState 中执行此操作。

Future<Tour> _tour;

  @override
  void initState() {
    super.initState();
    _tour = _tourService.getTourDataPerEmployee(employeeID: userinfo.user.uid);
  }

我的 FutureBuilder 如下所示：

FutureBuilder(
        future: _tour,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            print(snapshot.data.waypoints);
            return Container(
                child: ListView.builder(
              itemCount: snapshot.data.waypoints.length,
              itemBuilder: (context, index) {
                return TimelineTile(
                  nodePosition: 0.03,
                  contents: TourTile(
                    tour: snapshot.data,
                    index: index,
                  ),
                  node: TimelineNode(
                    indicator: CustomIndicator(
                        finished: snapshot.data.waypoints[index].finished),
                    startConnector: CustomConnector(
                        finished: snapshot.data.waypoints[index].finished,
                        inProgress: false),
                    endConnector: CustomConnector(
                        finished: snapshot.data.waypoints[index].finished,
                        inProgress: index >= snapshot.data.waypoints.length - 1
                            ? true
                            : snapshot.data.waypoints[index + 1].finished
                                ? false
                                : true),
                  ),
                );
              },
            ));
          } else {
            return Center(child: Text("Please wait"));
          }
        },
      ),

这就是我尝试添加动画的方式：

CircularProgressIndicator()

这很好用，但是当我尝试用动画替换简单的文本（“请稍候”）时，我得到了奇怪的结果。我无法从未来得到任何结果，有时只有几个结果。数据有时似乎根本没有到达，因为 snapshot.data 有时会打印 null ，有时所有结果都在那里。我看不到动画和构建器之间的任何连贯性。

Answer 1

试试这个：

Future<Tour> _tour;
  
  getTours() async {
    return await _tourService.getTourDataPerEmployee(employeeID: userinfo.user.uid);

  }

  @override
  void initState() {
    super.initState();
    _tour = getTours();
  }

然后在小部件中：

FutureBuilder(
        future: _tour,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            print(snapshot.data.waypoints);
            return Container(
                child: ListView.builder(
              itemCount: snapshot.data.waypoints.length,
              itemBuilder: (context, index) {
                return TimelineTile(
                  nodePosition: 0.03,
                  contents: TourTile(
                    tour: snapshot.data,
                    index: index,
                  ),
                  node: TimelineNode(
                    indicator: CustomIndicator(
                        finished: snapshot.data.waypoints[index].finished),
                    startConnector: CustomConnector(
                        finished: snapshot.data.waypoints[index].finished,
                        inProgress: false),
                    endConnector: CustomConnector(
                        finished: snapshot.data.waypoints[index].finished,
                        inProgress: index >= snapshot.data.waypoints.length - 1
                            ? true
                            : snapshot.data.waypoints[index + 1].finished
                                ? false
                                : true),
                  ),
                );
              },
            ));
          } else {
            return CircularProgressIndicator();
          }
        },
      ),

你甚至可以在未来调用 getTours()

FutureBuilder(
        future: getTours(),