ListView不在第一次出现Flutter

Question

My problem is that : The listview does not appear at the first launch of app but after a hot reload it appears.

It's the first time I meet this bug.

That's my code :

@override
Widget build(BuildContext context) {
  return new Scaffold(
    backgroundColor: Colors.black,
    body: new ListView.builder(
        itemCount: toutesLesCartes.length,
        itemBuilder: (context, count) {
          Carte carte = toutesLesCartes[count];
          String nom = carte.nomCarte;
          String image = carte.imageCarte;
          return new Dismissible(
            key: new Key(nom),
            direction: DismissDirection.endToStart,
            child: new Container(
              margin: EdgeInsets.all(5.0),
              child: new Card(
                color: Colors.transparent,
                elevation: 10.0,
                child: new Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    new Image.network(image, width: 150.0, height: 150.0,),
                    new CustomText(nom, factor: 2.0,),
                  ],
                ),
              ),
            ),
            background: new Container(
              padding: EdgeInsets.only(right: 20.0),
              color: Colors.red,
              child: new Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  new CustomText("Supprimer"),
                  new Icon(Icons.delete, color: Colors.white,)
                ],
              ),
            ),
            onDismissed: (direction) {
              setState(() {
                toutesLesCartes.removeAt(count);
                nombreCarteChoisiValeur--;
              });
            },
          );
        }
    ),
  );
}

I have an idea but it's strange : before, I using the Visibility widget so it is possible that it comes from a possible "cache" of the application?

All that will look at this post and help me, thank you very much!

Have a nice day !

Answer 1

Likely because toutesLesCartes.length is 0.

you can check this using the debugger or display something when the length is 0 eg

@override
Widget build(BuildContext context) {
  return new Scaffold(
    backgroundColor: Colors.black,
    body: new ListView.builder(
        itemCount: toutesLesCartes.length, //* place breakpoint here
        itemBuilder: (context, count) {
          Carte carte = toutesLesCartes[count];
          String nom = carte.nomCarte;
          String image = carte.imageCarte;

        if(toutesLesCartes == null || toutesLesCartes.length == 0){
          return CircularProgressIndicator(); //you should see loading animation if list is empty
        }
          return new Dismissible(
            key: new Key(nom),
            direction: DismissDirection.endToStart,
            child: new Container(
              margin: EdgeInsets.all(5.0),
              child: new Card(
                color: Colors.transparent,
                elevation: 10.0,
                child: new Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    new Image.network(image, width: 150.0, height: 150.0,),
                    new CustomText(nom, factor: 2.0,),
                  ],
                ),
              ),
            ),
            background: new Container(
              padding: EdgeInsets.only(right: 20.0),
              color: Colors.red,
              child: new Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  new CustomText("Supprimer"),
                  new Icon(Icons.delete, color: Colors.white,)
                ],
              ),
            ),
            onDismissed: (direction) {
              setState(() {
                toutesLesCartes.removeAt(count);
                nombreCarteChoisiValeur--;
              });
            },
          );
        }
    ),
  );
}

The solution would be to use a FutureBuilder

Word of warning: The application will run the build method multiple times, it's good practice to place anything you don't want to be repeatedly called (like database calls) outside of the method.