Flutter update list with state managment

Question

I am showing listview in my 2 pages. On the first page just simply showing the listView and on the other page I am adding and view the array by listView builder. Now the issue I am facing is when I add something in an array it's not changing in ListView builder so I can manage it by setState but when I go back on the first screen result isn't changing on that screen. I have generated some example code to clear

var listArray = [];

class FirstPage extends StatefulWidget {
  const FirstPage({Key? key}) : super(key: key);

  @override
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First'),

      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          GestureDetector(
            onTap: (){
              Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => ListWidget()),
              );
            },
            child: Container(
              color: Colors.blue,
              height: 100,
              width: 100,
              child: Text('Go List'),
            ),
          ),
          Expanded(
            child: ListView.builder(
                itemCount: listArray.length,
                itemBuilder: (BuildContext context, int index) {
                  return Text('name ${listArray[index]['name']} id ${listArray[index]['id']}');
                }),
          ),


        ],
      ),
    );
  }
}



class ListWidget extends StatefulWidget {
  const ListWidget({Key? key}) : super(key: key);

  @override
  _ListWidgetState createState() => _ListWidgetState();
}

class _ListWidgetState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First'),
        leading: IconButton(
          icon: Icon(Icons.arrow_back, color: Colors.black),
          onPressed: () => Navigator.of(context).pop(),
        ),
      ),
      body: Column(
        children: [
          GestureDetector(
            onTap: (){
              setState(() {
                listArray.add({'name' : 'test', 'id' : 101, 'comments': 'xyzzz'});

              });
            },
            child: Container(
              color: Colors.blue,
              height: 100,
              width: 100,
              child: Text('Add to list'),
            ),
          ),
          Expanded(
            child:  ListView.builder(
                itemCount: listArray.length,
                itemBuilder: (BuildContext context, int index) {
                  return Text('name ${listArray[index]['name']} id ${listArray[index]['id']}');
                }),
          )
        ],
      ),
    );
  }
}

I am looking in documentation for app state managment but not able to find something for list update. If any help in code or some example where I can find answer similar to this will be great.

user_2771717 · Answer

Try to update state of first widget when returning to it, so in _FirstPageState write this:

       onTap: () async {
          await Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => ListWidget()),
          );
          setState({});
        }

user_13109762 · Answer

Declaring a global variable like listArray is a bad practice. You should probably use some state management packages like provider or similar.

Flutter update list with state managment

2 Answers