Understanding the Flutter setState method

One of the keys when writing Flutter code is to know when to call the setState method. As a quick answer, the Flutter docs state:

Whenever you change the internal state of a State object, make the change in a function that you pass to setState.

Also:

Calling setState notifies the framework that the internal state of this object has changed in a way that might impact the user interface in this subtree ... (this) causes the framework to schedule a build for this State object ... (Conversely) If you just change the state without calling setState, the framework might not schedule a build and the UI might not be updated to reflect the new state.

So I’ll say all that this way:

Whenever you update your UI data model, make sure you call setState.

An important detail

There’s one other important thing you need to know:

Generally it’s recommended that the setState method only be used to wrap the actual changes to the state, not any computation that might be associated with the change.

A Flutter setState example

Here’s an example of a setState call I make right after reading some files from the filesystem:

setState(() {
    // update your data model here
    _imageFilenames = listOfImageFiles;
    _loading = false;
});

I use that code along with a Flutter ListView and CircularProgressIndicator. In the build method, the _loading variable lets me determine which widget to show:

body: _loading == true ? const Center(child: SizedBox(
    width: 30, 
    height: 30, 
    child: CircularProgressIndicator()
    )) : ListView.builder(
        itemCount: _imageFilenames.length,
        itemBuilder: (context, index) {
        // more code ...

Note that a better version of that code would look like this:

body: _loading == true ? _showProgressIndicator() : _showListView();