如何在 Flutter 中完成数据加载后呈现我的小部件

Question

我想做什么 登录后，显示具有列表视图的主屏幕。此列表视图显示来自 API 的数据。因此，加载需要一点时间。我想在加载完成后呈现我的主屏幕，我的列表视图充满了数据。

我已经做了什么 我有一个 api 助手 class 可以 api 工作。它有一个静态方法，可以为我的列表视图获取数据并返回一个列表。这是我的 getFixtureData 方法。

 static Future<List<Fixtures>> getFixtureData() async {
    Map<String, String> queryParameters = {
      'league': '78',
      'next': '20',
    };

    http.Response response = await http.get(
      getUrl('fixtures', queryParameters),
      headers: requestHeaders,
    );

    print(response.body);

    if (response.statusCode == 200) {
      String data = response.body;
      List<dynamic> result = jsonDecode(data)['response'];

      for (int i = 0; i < result.length; i++) {
        Fixtures fixture = Fixtures();

        fixture.leagueID = jsonDecode(data)['response'][i]['league']['id'];
        fixture.country = jsonDecode(data)['response'][i]['league']['country'];
        fixture.leagueName = jsonDecode(data)['response'][i]['league']['name'];
        fixture.fixtureID = jsonDecode(data)['response'][i]['fixture']['id'];

        //get Odds to match with fixtures by fixtureID
        await getOddsData(fixture.fixtureID);

        fixture.dateTime =
            DateTime.parse(jsonDecode(data)['response'][i]['fixture']['date']);
        fixture.homeTeam =
            jsonDecode(data)['response'][i]['teams']['home']['name'];
        fixture.awayTeam =
            jsonDecode(data)['response'][i]['teams']['away']['name'];
        fixture.status =
            jsonDecode(data)['response'][i]['fixture']['status']['long'];
        fixture.homeGoals = jsonDecode(data)['response'][i]['goals']['home'];
        fixture.awayGoals = jsonDecode(data)['response'][i]['goals']['away'];
        fixture.htScoreHome =
            jsonDecode(data)['response'][i]['score']['halftime']['home'];
        fixture.htScoreAway =
            jsonDecode(data)['response'][i]['score']['halftime']['away'];
        fixture.ftScoreHome =
            jsonDecode(data)['response'][i]['score']['fulltime']['home'];
        fixture.ftScoreAway =
            jsonDecode(data)['response'][i]['score']['fulltime']['away'];

        if (oddsList.length > 0) {
          for (int j = 0; j < oddsList.length; j++) {
            if (oddsList[j].fixtureID == fixture.fixtureID) {
              fixture.homeOdds = oddsList[j].homeOdds;
              fixture.drawOdds = oddsList[j].drawOdds;
              fixture.awayOdds = oddsList[j].awayOdds;
              fixture.bookmakerName = oddsList[j].bookmakerName;
              FootballApi.fixtureList.add(
                  fixture); // this line must be here. If there is no odds of that match, it should not be in fixtureList
            }
          }
        }
      }
    } else {
      print('statusCode: ' + response.statusCode.toString());
    }

    return FootballApi.fixtureList;
  }

我在我的有状态小部件 (HomeScreen) 中调用此方法，它有一个列表视图，我将返回的列表 getFixtureData 方法提供给它。我在 HomeScreen 的 initState 中调用它。这是相关代码。

class HomeScreen extends StatefulWidget {
  static String id = 'home_screen';

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

class _HomeScreenState extends State<HomeScreen> {
  int gameIndex = 0;
  String gameTitle = 'Soccer';
  int selectedCategoryIndex = 0;
  List<Fixtures> fixtureList = List<Fixtures>();


  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    getFixture();
  }

  Future<List<Fixtures>> getFixture() async {
    fixtureList = await FootballApi.getFixtureData();
    return fixtureList;
  }

这部分是我将数据传递给 HomeScreen 中的列表视图的地方。

      Stack(children: [
        AppListView(
          matchList: FootballApi.fixtureList,
          //callback function brings the matchCounter value from ListView class
          onChange: (value) {
            setState(() {
              matchCounter = value;
            });
          },
          finalBetList: (value) {
            setState(() {
              betList = value;
            });
          },
        ),

问题是；当用户登录时，他正在使用空列表视图查看我的主屏幕。几秒钟后加载列表视图。我想在列表视图完全加载后呈现主屏幕。最好的方法是什么？

Answer 1

从异步函数获取数据后，使用 FutureBuilder 小部件构建小部件；

FutureBuilder<List<Fixtures>>(
  future: getFixture(),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      List<Fixtures> yourResponseDataFromAsync = snapshot.data;
      return AppListView(
        matchList: yourResponseDataFromAsync,
        //callback function brings the matchCounter value from ListView class
        onChange: (value) {
          setState(() {
            matchCounter = value;
          });
        },
        finalBetList: (value) {
          setState(() {
            betList = value;
          });
        },
      );
    }
    return CircularProgressIndicator();
  },
),

如何在 Flutter 中完成数据加载后呈现我的小部件

How to render my widget after data loading completed in Flutter

asynchronous

future

dart

flutter