Flutter provider use - flutter

Question

I have seen a code from a tutorial to create a favorite selection in ListView. But I have seen it doesn't use the provider, I wonder if it is better to use it. I want to create a favorite selection by click on a button on each item and I want to retrieve the select item in an other ListView. This is the code from the tutorial :
main.dart
import 'package:badges/badges.dart';
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
import 'package:words/favorite_words_route.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Likely Words',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Likely Words'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<String> words = nouns.take(40).toList();
List<String> savedWords = List<String>();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
actions: <Widget>[
Badge(
badgeContent: Text('${savedWords.length}'),
toAnimate: false,
position: BadgePosition.topRight(top: 0, right: 0),
child: IconButton(
icon: Icon(Icons.bookmark),
onPressed: () => pushToFavoriteWordsRoute(context),
),
),
],
),
body: ListView.separated(
itemCount: words.length,
separatorBuilder: (BuildContext context, int index) => Divider(),
itemBuilder: (BuildContext context, int index) {
String word = words[index];
bool isSaved = savedWords.contains(word);
return ListTile(
title: Text(word),
trailing: Icon(
isSaved ? Icons.favorite : Icons.favorite_border,
color: isSaved ? Colors.red : null,
),
onTap: () {
setState(() {
if (isSaved) {
savedWords.remove(word);
} else {
savedWords.add(word);
}
});
},
);
},
),
);
}
Future pushToFavoriteWordsRoute(BuildContext context) {
return Navigator.of(context).push(
MaterialPageRoute(
builder: (BuildContext context) => FavoriteWordsRoute(
favoriteItems: savedWords,
),
),
);
}
}
favorite_words_route.dart
import 'package:flutter/material.dart';
class FavoriteWordsRoute extends StatelessWidget {
final List<String> favoriteItems;
const FavoriteWordsRoute({Key key, #required this.favoriteItems}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Favorites words'),
),
body: ListView.separated(
itemCount: favoriteItems.length,
separatorBuilder: (BuildContext context, int index) => Divider(),
itemBuilder: (BuildContext context, int index) => ListTile(
title: Text(favoriteItems[index]),
),
),
);
}
}
Tell me for the performance if the provider is better.

Answer 1

Provider will not make the performance better.
Calling setState rebuilds a widget. If a widget is rebuilt, at-worst all of it's children are built. So if I build a list, all list-items might rebuild.
The optimization that can be made in this case is calling setState from inside the ListItem instead of the MyHomePage widget. This gives Flutter the least work to do, since ListItem has fewer children than ListView.
Provider does not affect the way Flutter builds widgets. You can still make the same mistakes of rebuilding too many widgets too frequently when using Provider.
Provider does however give you some tools to rebuild smaller widgets. One example is Selector.