MaterialStateProperty typedef - material_ui library

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.

Learn more about WidgetStateProperty on the Flutter YouTube channel.

Material state properties represent values that depend on a widget's material "state". The state is encoded as a set of MaterialState values, like WidgetState.focused, WidgetState.hovered, WidgetState.pressed. For example the InkWell.overlayColor defines the color that fills the ink well when it's pressed (the "splash color"), focused, or hovered. The InkWell uses the overlay color's resolve method to compute the color for the ink well's current state.

ButtonStyle, which is used to configure the appearance of buttons like TextButton, ElevatedButton, and OutlinedButton, has many material state properties. The button widgets keep track of their current material state and resolve the button style's material state properties when their value is needed.

This example shows how you can override the default text and icon color (the "foreground color") of a TextButton with a MaterialStateProperty. In this example, the button's text color will be Colors.blue when the button is being pressed, hovered, or focused. Otherwise, the text color will be Colors.red.

To see it in action, copy and run this code snippet on DartPad.

import 'package:material_ui/material_ui.dart';

/// Flutter code sample for [WidgetStateProperty].

void main() => runApp(const MaterialStatePropertyExampleApp());

class MaterialStatePropertyExampleApp extends StatelessWidget {
  const MaterialStatePropertyExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('MaterialStateProperty Sample')),
        body: const Center(child: MaterialStatePropertyExample()),
      ),
    );
  }
}

class MaterialStatePropertyExample extends StatelessWidget {
  const MaterialStatePropertyExample({super.key});

  @override
  Widget build(BuildContext context) {
    Color getColor(Set<WidgetState> states) {
      const Set<WidgetState> interactiveStates = <WidgetState>{
        WidgetState.pressed,
        WidgetState.hovered,
        WidgetState.focused,
      };
      if (states.any(interactiveStates.contains)) {
        return Colors.blue;
      }
      return Colors.red;
    }

    return TextButton(
      style: ButtonStyle(
        foregroundColor: WidgetStateProperty.resolveWith(getColor),
      ),
      onPressed: () {},
      child: const Text('TextButton'),
    );
  }
}

MaterialStateProperty<T> typedef

Implementation

material_ui library