What is Material State in Flutter?

Material State is an interactive state that some of the Material widgets can use. In addition, with the help of MaterialState enum, those widgets receive inputs from users and change its state.

How they do that, we’ll see in a minute. However, before that we’ll try to understand how it works.

Let us consider two material widgets like checkbox and text button. In our subsequent part, we’ll test how we can implement material state on these two widgets.

As we know, these material widgets usually work on user inputs. A user can tick the checkbox or press the button. They can also hover over those widgets.

As a result the interactive state of these material widgets change. If a text button looks red, when a user hover over the button, it may change to green.

The same is true for the check box.

Now, the question is, how these widgets track their state?

They track their current state using Set<MaterialState>.

Suppose we want to change color of two stateful material widgets. We need to write some code like this:

Color changeColor(Set<MaterialState> states) {
      const Set<MaterialState> interactiveStates = <MaterialState>{
        MaterialState.pressed,
        MaterialState.hovered,
        MaterialState.focused,
      };
      if (states.any(interactiveStates.contains)) {
        return Colors.green;
      }
      return Colors.deepOrange;
    }

We can call these function inside text button or checkbox, like the following way:

TextButton(
              style: ButtonStyle(
                foregroundColor: MaterialStateProperty.resolveWith(changeColor),
              ),
              onPressed: () {},
              child: const Text('TextButton'),
            ),
           ...
            Checkbox(
              checkColor: Colors.white,
              fillColor: MaterialStateProperty.resolveWith(changeColor),
              value: isChecked,
              onChanged: (bool? value) {
                setState(
                  () {
                    isChecked = value!;
                  },
                );
              },
            ),

We can see that each stateful material widgets has different property to call that changeColor method. For full code please visit the respective GitHub repository.

And to do that they take help of another interface MaterialStateProperty. This interface helps these widget objects to change their state. Although it sounds simple, yet, it goes through a complex process.

MaterialStateProperty acts as an interface for material widgets, here checkbox and text button. Consequently, these widgets resolve to a value of type T that links to MaterialState, and moreover, it controls the widget’s interactive state.

Now MaterialState has many values, such as, MaterialState.focused, MaterialState.hovered, MaterialState.pressed.

We’ve seen that in the above code.

For an example, if we take a look at the initial state of the flutter app, it looks like the following image:

Initially the text button and the check box are deep orange. When we had taken the screenshot that had been their initial state.

Due to quality of the image the deep orange looks like red. 🙂 Anyway, let us take a look at this part of code of Set<MaterialState>:

return Colors.deepOrange;

What is material state property in Flutter?

To sum up in one sentence, material state properties represent values that depend on text button or checkbox widget’s material state.

We have already encoded that as a Set<MaterialState> values and check whether the values are getting changed:

if (states.any(interactiveStates.contains)) {
        return Colors.green;
      }

As a result, if we hover, the color of text button changes.

The same is true for the checkbox. The state changes as we hover over this material widget.

To sum up, we can say that the relationship between MaterialState enum and MaterialStateProperty class plays a key role here.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Technical blog

Twitter