Exploring Flutter MaterialStateProperties -Dynamic UIs

Maneesha Erandi
3 min readMay 23


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
  • Focused
  • Selected
  • Activated
  • Pressed
  • Dragged
  • On
  • Off
  • Error

Available options for customization of MaterialStateProperty

MaterialStateProperty is an abstract base class with several concrete implementations with specific use cases.

  • MaterialStatePropertyWith<T>: Allows to define custom properties with maximum flexibility
  • MaterialStateColor: Define a Color that is also a MaterialStateProperty
  • MaterialStateTextStyle: Define different text styles for different states

You can find more details from flutter official website for below widgets as well.

Maneesha Erandi

I write about mobile development and wildlife.