Learn Pain Less

HomeOur TeamContact
Flutter
How to Refresh Specific Widget with setState using StatefulBuilder() in Flutter
Pawneshwer Gupta
Pawneshwer Gupta
April 20, 2023
1 min

Table Of Contents

01
What Is StatefulBuilder?
02
StatefulBuilder to Refresh Widget
03
Conclusion
How to Refresh Specific Widget with setState using StatefulBuilder() in Flutter

Flutter provides the setState() method as a method to change the state of any given widget, but sometimes you may wish to update just a specific widget and not rebuild the whole tree. That is where StatefulBuilder comes into play - with it, you can update just one specific widget without rebuilding its entire tree!

In this article, we will cover how to refresh a specific widget using setState and StatefulBuilder in Flutter.

What Is StatefulBuilder?

StatefulBuilder is a Flutter widget that allows you to create widgets with their own mutable state, similar to StatefulWidget but differing in that its setState() method allows only its widget to update.

StatefulBuilder makes using StatefulBuilders easier. Simply wrap your widget with it, and provide a callback function that will be called when its state needs updating. The callback function takes two arguments; they are: BuildContext and StateSetter - these represent the context in which your widget resides wrapped by StatefulBuilders; while StateSetter acts as a way of updating its state directly.

StatefulBuilder to Refresh Widget

If you want to refresh a specific widget, wrap its instance with StatefulBuilder and call its StateSetter function for update of state. Here is an example:

StatefulBuilder(
builder: (BuildContext context, StateSetter setState) {
return Column(
children: [
Text('Counter: $counter'),
RaisedButton(
child: Text('Increment'),
onPressed: () {
setState(() {
counter++;
});
},
),
],
);
},
)

In this example, we use a Column widget which houses a Text widget displaying a counter value and an IncrementButton that increments it upon press. All three components are wrapped by StatefulBuilder for ease of use.

When the RaisedButton is pressed, its onPressed callback function will be triggered and we use its setState() method of the StateSetter to change its counter value accordingly. This causes both Text and Column widgets to redraw themselves with their new counter values but not Text widget.

Conclusion

Flutter’s StatefulBuilder widget offers you the flexibility of updating a specific widget’s state without rebuilding its entire tree, which can come in handy when updating only part of your UI and not all at once.

We hope this article has been beneficial in explaining how to refresh a widget using setState and StatefulBuilder in Flutter. If you have any queries or comments below, feel free to submit them below.

Learn Flutter in 90 days with Pawneshwer!

Dart Beginners Course in Hindi free of cost for limited period.

Start Learning

250+

LESSONS

30+

COURSES

15+

TUTORS

Subscribe to our newsletter!

We'll send you the best of our blog just once a month. We promise.

Tags

Guide

Share


Pawneshwer Gupta

Pawneshwer Gupta

Software Developer

Pawneshwer Gupta works as a software engineer who is enthusiastic in creating efficient and innovative software solutions.

Expertise

Python
Flutter
Laravel
NodeJS

Social Media

Related Posts

Flutter SetState Isn't Defined: How to Troubleshoot and Fix This Common Error
Flutter SetState Isn't Defined: How to Troubleshoot and Fix This Common Error
April 17, 2023
2 min
Learn Pain Less  © 2023, All Rights Reserved.
Crafted with by Prolong Services

Quick Links

Advertise with usAbout UsContact Us

Social Media