Exploring Flutter MaterialStateProperties -Dynamic UIs
--
MaterialStateProperty
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
Colorthat is also aMaterialStateProperty - MaterialStateTextStyle: Define different text styles for different states
You can find more details from flutter official website for below widgets as well.
MaterialStateMouseCursor
MaterialStateOutlinedBorder
MaterialStateOutlineInputBorder…
