Flutter update list with state managment - flutter

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<FirstPage> {
#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<ListWidget> {
#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.

Answer 1

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({});
}

Answer 2

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