How to manage state of two different stateful widget - flutter

Question

The basic outline of the widget is shown Below. MyListViewBuilder1 and MyListViewBuilder2 both stateful widget are defined in separate dart file. Both of them consists of ListViewBuilder.
What I want to achieve is that when the item of MyListViewBuilder1 gets deleted then deleted item appears in MyListViewBuilder2, But the problem is this happens only when I restart the screen.
So how can I change solve this?
How can I change the state of next when state of one is changed?
Column(
children: <Widget>[
MyListViewBuilder1(),
MyListViewBuilder2()
]
)

Answer 1

You could use the provider package to manage state in different widgets throughout the application. In the below example, when an item is deleted in the MyListViewBuilder1, it is removed from the list and added to the list of deleted items in the ItemChangeNotifier class. The MyListViewBuilder2 has its own independent list of items, however in its build method it watches for any changes to the list of deleted items in the ItemChangeNofifier class and adds these deleted items to its own independent list of items.
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() {
runApp(
MultiProvider(
providers: [
ChangeNotifierProvider<ItemChangeNotifier>(
create: (context) {
return ItemChangeNotifier();
},
),
],
child: MyApp(),
),
);
}
class Item {
int id;
String title;
Item({
this.id,
this.title,
});
}
class ItemChangeNotifier extends ChangeNotifier {
final _deletedItems = <Item>[];
List<Item> get deletedItems => List.unmodifiable(_deletedItems);
void deleteItem(Item item) {
_deletedItems.add(item);
notifyListeners();
}
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
Expanded(
child: MyListViewBuilder1(),
),
Divider(
thickness: 8,
),
Expanded(
child: MyListViewBuilder2(),
),
],
),
);
}
}
class MyListViewBuilder1 extends StatefulWidget {
#override
_MyListViewBuilder1State createState() => _MyListViewBuilder1State();
}
class _MyListViewBuilder1State extends State<MyListViewBuilder1> {
List<Item> _items;
#override
Widget build(BuildContext context) {
return ListView.builder(
itemBuilder: (context, index) {
return ListTile(
title: Text(_items[index].title),
trailing: IconButton(
icon: Icon(Icons.delete),
onPressed: () {
context.read<ItemChangeNotifier>().deleteItem(_items[index]);
setState(() {
_items.removeAt(index);
});
},
),
);
},
itemCount: _items.length,
);
}
#override
void initState() {
super.initState();
_items = List.generate(
10,
(index) => Item(
id: index + 1,
title: 'Item ${index + 1}',
),
);
}
}
class MyListViewBuilder2 extends StatefulWidget {
#override
_MyListViewBuilder2State createState() => _MyListViewBuilder2State();
}
class _MyListViewBuilder2State extends State<MyListViewBuilder2> {
List<Item> _items;
#override
Widget build(BuildContext context) {
final items = [
..._items,
...context.select<ItemChangeNotifier, List<Item>>(
(itemChangeNotifier) => itemChangeNotifier.deletedItems,
),
];
return ListView.builder(
itemBuilder: (context, index) {
return ListTile(
title: Text(items[index].title),
);
},
itemCount: items.length,
);
}
#override
void initState() {
super.initState();
_items = List.generate(
10,
(index) => Item(
id: index + 101,
title: 'Item ${index + 101}',
),
);
}
}