Exploring Flutter MaterialStateProperties -Dynamic UIs

Maneesha Erandi
3 min readMay 23, 2023


The MaterialStateProperty class helps define different visual properties for various states of a widget. With MaterialStateProperty, we can easily customize the appearance of a widget to offer a highly flexible and interactive user experience.

Interface for classes that resolve to a value of type T based on a widget’s interactive “state”, which is defined as a set of MaterialStates.

What is a MaterialState?

States are visual representations used to communicate the status of a component or interactive element.

It’s about how widgets are responding to user input. Some of the Material widgets take on these interactive states.

Where is the definition of states?

You can follow Material design official page for the definition, usage and anatomy for these states

Types of States

  • Enabled
  • Disabled
  • Hover