如何使用GridView从服务器获取JSON数据--Flutter

Question

我参考过食谱。

https://flutter.dev/docs/cookbook/networking/fetch-data

示例代码是获取单个JSON数据。

我正在尝试从 StatefulWidget 获取以下多个 JSON 数据。我想通过 GridView 在每个网格中显示季节数据。

[
  {"id":1,"season_end":"1999/01","season_name":"First","season_start":"1999/08"}, 
  {"id":2,"season_end":"1999/07","season_name":"Second","season_start":"1999/02"}, 
  {"id":3,"season_end":"2000/01","season_name":"Third","season_start":"1999/08"}, 
  {"id":4,"season_end":"2000/07","season_name":"Forth","season_start":"2000/02"}
]

但是我不知道如何编写更好的代码，如下所示。

class _HomePageState extends State<HomePage> {
  Future<List<Season>> seasons;

  @override
  void initState(){
    super.initState();
    seasons = fetchSeasons();
  }

  Widget build(BuildContext context) {
    return Scaffold(
      body: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            ...
          ),
          itemBuilder: (context, index){
            return seasons[index].toString();
          }
      )
    )
  }
}

我应该使用FutureBuilder<List<Season>>，但我不知道如何使用with GridView。你有什么建议吗？请。

Future<List<Season>> fetchSeasons() async {
  final response =
  await http.get('http://10.0.2.2:4000/api/seasons');

  if(response.statusCode == 200){
    Iterable list = json.decode(response.body);
    var seasons = list.map((season) => Season.fromJson(season)).toList();
    return seasons;
  }else{
    print('Error!!');
    throw Exception('Failed to Load Post');
  }
}

class Season {
  final int id;
  final String season_name;
  final String season_start;
  final String season_end;

  Season({this.id, this.season_name, this.season_start, this.season_end});

  factory Season.fromJson(Map<String, dynamic> json){
    return Season(
      id: json['id'],
      season_name: json['season_name'],
      season_start: json['season_start'],
      season_end: json['season_end']
    );
  }
}

Answer 1

问题是seasonsis a Future，而不是 a List，这就是为什么你不能像列表一样使用它。

如果您想访问该列表Future，则需要使用FutureBuilder，如下所示：

Widget build(BuildContext context) {
  return Scaffold(
    body: FutureBuilder<List<Season>>(
      future: seasons,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return GridView.builder(
              itemCount: snapshot.data.length,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              ...
              ),
              itemBuilder: (context, index) {
                return Text("${snapshot.data[index].season_name}");
              }
          );
        } else if (snapshot.hasError) {
          return Text("Error");
        }
        return Text("Loading...");
      },
    ),
  );
}