Flutter - How to insert stateful widget at the top of a ListView.separated?

Question

I have a ListView.separated which initially contains two stateful widgets that say: Hello 2 and Hello 3 .

After some time, I want to insert a stateful widget saying Hello 1 at the top of the ListView.separated .

I expect the ListView.separated to show Hello 1 , Hello 2 , Hello 3 .

Unfortunately, when I do this, Hello 3 gets duplicated instead of Hello 1 getting added to the top of the ListView.separated . It now shows Hello 2 , Hello 3 , Hello 3 .

All of this works fine if I use stateless widgets. If I use StatefulWidget , the order gets messed up and widgets get duplicated.

Answer 1

You can try this.

bool _condition = false;

Widget build(context) {
  return ListView(
    children: <Widget>[
      _condition ? yourNewWidget : Container(),
      ListView.separated(
        shrinkWrap: true, // needed 
        physics: ClampingScrollPhysics(), // needed 
        itemBuilder: (c, i) => Text("Text = ${i}"),
        separatorBuilder: (c, i) => Divider(),
        itemCount: 100,
      )
    ],
  )
}

When you have a newWidget up and ready make sure you call setState(()) to update build() method.