web-dev-qa-db-fra.com

Comment construire une liste dynamique dans Flutter?

J'ai ce widget attaché à un corps Scaffold. Le widget obtient une méthode async qui retourne un objet json.

Je veux construire une liste, dynamiquement, à partir de cet objet json. Le problème est que l'écran est vide. Pour une raison quelconque, ce widget doit se rafraîchir lorsque la liste est prête ou quelque chose comme ça.

Des idées?

class TestList extends StatelessWidget {
  final quiz;

  TestList({this.quiz});

  @override
  Widget build(BuildContext context) {
    var listArray = [];

    this.quiz.then((List value) {   // this is a json object

      // loop through the json object
      for (var i = 0; i < value.length; i++) {

        // add the ListTile to an array
        listArray.add(new ListTile(title: new Text(value[i].name));

      }
    });

    return new Container(
        child: new ListView(
      children: listArray     // add the list here.
    ));
  }
}
listviewasynchronousflutter
10
Patrioticcow

Vous pouvez utiliser le setState pour reconstruire l'interface utilisateur.

Exemple:

class TestList extends StatefulWidget {

  final Future<List> quiz;

  TestList({this.quiz});

  @override
  _TestListState createState() => new _TestListState();

}

class _TestListState extends State<TestList> {

  bool loading = true;

  _TestListState(){
    widget.quiz.then((List value) {

      // loop through the json object
      for (var i = 0; i < value.length; i++) {

        // add the ListTile to an array
        listArray.add(new ListTile(title: new Text(value[i].name));

        }

            //use setState to refresh UI
            setState((){
          loading = false;
        });

    });
  }

  @override
  Widget build(BuildContext context) {

    List<Widget> listArray = [];

    return new Container(
        child: new ListView(
            children: loading?[]:listArray     // when the state of loading changes from true to false, it'll force this widget to reload
        ));

  }

}
11
Hemanth Raj

Vous pouvez utiliser FutureBuilder pour vous aider avec les états du widget:

new FutureBuilder<List>(
  future: widget.quiz,
  builder:
      (BuildContext context, AsyncSnapshot<List> snapshot) {
    switch (snapshot.connectionState) {
      case ConnectionState.none:
        return new Text('Waiting to start');
      case ConnectionState.waiting:
        return new Text('Loading...');
      default:
        if (snapshot.hasError) {
          return new Text('Error: ${snapshot.error}');
        } else {
          return new ListView.builder(
              itemBuilder: (context, index) =>
                  new Text(snapshot.data[index].name),
              itemCount: snapshot.data.length);
        }
    }
  },
)

Fondamentalement, il notifie la méthode spécifiée sur le générateur en fonction de l'état futur. Une fois que le futur a reçu une valeur et qu'il ne s'agit pas d'une erreur, vous pouvez utiliser ListView.builder pour créer la liste, c'est une méthode pratique pour créer la liste lorsque tous les éléments sont du même type.

Plus d'informations sur https://docs.flutter.io/flutter/widgets/FutureBuilder-class.html

4
Sergi and Replace