How to rebuild only modified item in list with ChangeNotifier - flutter

Question

I am trying to fetch the data from server. When the button is pushed, a dummy widget is added to the list and response is shown after data is fetched.
I called notifyListeners() when item is added to the list and when data is loaded, but all of items are rebuilt even unchanged items.
How can I prevent rebuilding unchanged item?
Here's my code.
class Item {
bool isLoaded;
String request;
String data;
Item(this.request) : isLoaded = false;
Future loadItemData() {
// dummy for api request
return Future.delayed(Duration(seconds: 3)).whenComplete(() {
data = "item get result";
isLoaded = true;
});
}
}
class ItemList extends ChangeNotifier {
List<Item> lists = [];
void addItem(String request) {
var item = Item(request);
lists.add(item);
item.loadItemData().whenComplete(() {
notifyListeners();
});
notifyListeners();
}
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
create: (context) => ItemList(),
child: MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyItems(),
),
);
}
}
class MyItems extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("My Items"),
),
body: Consumer<ItemList>(
builder: (context, value, child) {
return Column(
children: <Widget>[
RaisedButton(
child: const Text("Add Item"),
onPressed: () {
value.addItem("dummy request id");
},
),
Expanded(
child: ListView.builder(
itemBuilder: (context, index) {
var item = value.lists[index];
return item.isLoaded
? ListTile(
title: Text(value.lists[index].data),
)
: ListTile(
leading: CircularProgressIndicator(),
);
},
itemCount: value.lists.length,
),
),
],
);
},
),
);
}
}

Answer 1

Make use of Unique keys with ListTile.
ListTile(
key: ValueKey(value.lists[index].data['id']),
...
)