How to display my List<Object> into Listview

问题:

i have an Json File as assets. parsing works perfect, but when i use the list from my json, an error is thrown. "the getter was called on null"

Here my JsonCode:

class Biersorten{
  final List<Bier> biersorten;

  Biersorten({
    this.biersorten
  });

  factory Biersorten.fromJson(List<dynamic> parsedJson){
    List<Bier> listBiersorten = new List<Bier>();
    listBiersorten = parsedJson.map((i)=>Bier.fromJson(i)).toList();

    return new Biersorten(
      biersorten: listBiersorten,
    );
  }
}

class Bier{
  int id;
  String name;
  String firmenname;
  String alkoholgehalt;

  Bier({this.id, this.name, this.firmenname, this.alkoholgehalt});

  factory Bier.fromJson(Map<String, dynamic> parsedJson){
    return Bier(
        id: parsedJson["id"],
        name : parsedJson["name"],
        firmenname : parsedJson ["firmenname"],
        alkoholgehalt: parsedJson["alkoholgehalt"]
    );
  }
}

Here my HomePageCode:

class MyHomePage extends StatelessWidget {
  final String title;
  Biersorten biersorten;

  MyHomePage({this.title}){
    loadBier();
  }

  Future<String> _loadBierAsset() async {
    return await rootBundle.loadString("assets/JSON/Beer.json");
  }

  Future loadBier() async {
    String jsonString = await _loadBierAsset();
    final jsonResponse = json.decode(jsonString);
    biersorten = new Biersorten.fromJson(jsonResponse);
    print(biersorten.biersorten[0].alkoholgehalt);
  }

  Widget getCard(String title){
    return Card(
        child: Container(
          height: 50,
          child: Center(
            child: Text(title),
          ),
        )
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Column(
        children: <Widget>[
          ListView.builder(
            itemCount: biersorten.biersorten.length,
            itemBuilder: (context, i){
              return getCard(biersorten.biersorten[i].name);
            },
          )
        ],
      ),
    );
  }
}

In the Function _loadBierAsset() i can use the List, but in the ListView.builder it throw an error. How can i solve this problem?

Thanks for help:)

回答1:

It is because your function is async and it doesn't return before the list is built. Till that time the list hasn't been initialized.First change your widget from Stateless to Stateful. Then Do this:

    body: biersorten!=null ?
        Column(
            children: <Widget>[
              ListView.builder(
                itemCount: biersorten.biersorten.length,
                itemBuilder: (context, i){
                  return getCard(biersorten.biersorten[i].name);
                },
              )
            ],
          ): Center(child: CircularProgressIndicator()),

And change your loadBier function to

Future loadBier() async {
    String jsonString = await _loadBierAsset();
    final jsonResponse = json.decode(jsonString);
    setState((){
    biersorten = new Biersorten.fromJson(jsonResponse);
    });
    print(biersorten.biersorten[0].alkoholgehalt);
  }

And in your initState() add

loadBier();