Managing State in Flutter
About this episode
Leave a rating/review
See forum comments
Mark complete
Next episode: 14. Use Multiple Providers
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
So far, we’ve been getting a reference to our data object and then simply used it in our builder method. If this is all you are doing, you can opt to use a Consumer instead. A consumer gets your data from the Provider and unwraps it for you to use in a builder method.
Widget build(BuildContext context) {
return Consumer<Pillar>(
builder: (_, pillar, __) => Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Center(
child: TutorialWidget(),
),
Padding(
padding: const EdgeInsets.only(top: 24.0),
child: Text(
'Total Tutorials: ${pillar.articleCount}',
style: const TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
),
)
],
),
);
}
return Consumer<Pillar>(builder: (_, pillar, __) {
return Stack(
children: [
InkWell(
onTap: () {
pillar.increaseArticleCount();
},
child: Image.asset('assets/images/${pillar.type.imageName}',
width: 110, height: 110),
),
Positioned(
bottom: 2,
child: CircleAvatar(
backgroundColor: Colors.blue,
child: Text(pillar.articleCount.toString()),
),
)
],
);
});