Flutter's setState(): Triggering UI Updates
setState() tells Flutter "my data changed, so rebuild the UI." It's not the change itself, but the notification that a change happened. Use it in a StatefulWidget's State class when events modify data your build() method uses.
Why it exists
Flutter needs an explicit signal to know when to redraw a part of the screen. Simply changing a variable's value isn't enough for the framework to detect. The setState() method provides this signal, telling the framework that a widget's internal state has changed and its UI might need to be updated.
The mental model
Think of setState() as flipping a "needs update" switch for a widget. You pass it a small function that performs the actual state change (e.g., _counter++). After that function runs, Flutter's engine is notified and schedules a call to your widget's build method in an upcoming frame. The UI doesn't change instantly, but the update is queued.
How it works
When you call setState((){ ... }), two things happen in order. First, the function you provided is executed synchronously. Second, the framework internally calls Element.markNeedsBuild(), which adds the widget to a "dirty" list. On the next frame, the Flutter engine rebuilds the widgets on this list, causing their build() methods to run again with the new state.
When to use it
Call setState() any time you change a variable inside a State object that affects the output of your build method. This is common in response to user input (like a button's onPressed), after a timer completes, or when data from a Future or Stream arrives and needs to be displayed.
When not to use it
Do not put asynchronous operations (like network requests or file I/O) directly inside the setState() callback; the callback must be synchronous. Perform the async work first, then call setState() with the result. Avoid calling it from within the build method, as this can cause infinite rebuild loops. Finally, never call it after the widget has been removed from the tree (after dispose() is called).
One canonical example
In the classic counter app, an _counter variable is stored in the State class. A FloatingActionButton's onPressed callback calls a method that wraps only the state mutation, _counter++, inside a setState() call. This signals Flutter to rebuild the widget, which then reads the new value of _counter and updates the Text widget on screen.
Interview question
Which statement accurately describes the sequence of events when setState() is called?
- a.The provided callback function executes synchronously, and the widget is marked for a rebuild in an upcoming frame.Correct
- b.The widget's build() method is executed, then the provided callback updates the state.
- c.The widget is added to a "dirty" list, and then its build() method is called in the next frame.
- d.The provided callback updates the state, and the UI is instantly refreshed on screen.
Why? this is the answer
The card states that the provided function executes synchronously first, then the framework marks the widget as needing a rebuild. The UI update and build method call happen in an upcoming frame, not instantly.
Just read this? Test yourself on what you have been reading.
Read the original → api.flutter.dev
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on flutter — each one lists the topics its interview covers.
See open roles