MaterialStateProperty not properly generated about theme_extensions_builder

[pro100andrey]

Hi @mariogorki94, I need some time for investigate it.

Thanks

[mariogorki94]

Thanks @pro100andrey if you need some more info, ready to help!

[pro100andrey]

Hi @mariogorki94, you should add lerp static function in your MMStateProperties class

class MMStateProperties extends MaterialStateProperty<Color?> {
  @override
  Color ?resolve(Set<MaterialState> states) {
    if (states.contains(MaterialState.disabled)) {
      return Colors.green;
    }

    return Colors.black;
  }

  static MMStateProperties? lerp(
    MMStateProperties? a,
    MMStateProperties? b,
    double t,
  ) {
    return _ColorResolver(a, b, t);
  }
}

class _ColorResolver implements MMStateProperties {
  const _ColorResolver(this.a, this.b, this.t);

  final MaterialStateProperty<Color?>? a;
  final MaterialStateProperty<Color?>? b;
  final double t;

  @override
  Color? resolve(Set<MaterialState> states) {
    final resolvedA = a?.resolve(states);
    final resolvedB = b?.resolve(states);

    return Color.lerp(resolvedA, resolvedB, t);
  }
}

@themeExtensions
class ElevatedButtonThemeExtension
    extends ThemeExtension<ElevatedButtonThemeExtension>
    with _$ThemeExtensionMixin {
  const ElevatedButtonThemeExtension({
    required this.backgroundColor,
    required this.foregroundColor,
    required this.test,
    this.borderRadius,
    this.radius = 5,
  });

  final BorderRadius? borderRadius;
  final MMStateProperties test;
  final double radius;
  final Color backgroundColor;
  final Color foregroundColor;
}

it works:

Thanks

[pro100andrey]

Hi @mariogorki94, any updates?

[mariogorki94]

The proposed solution works if we are extending MaterialState, but if we want to use the default MaterialState class without extending it what may be the possible solution ?
For example here are some properties to work with:

 static final _interactiveStates = {
    MaterialState.pressed,
    MaterialState.selected,
    MaterialState.focused,
    MaterialState.dragged,
    MaterialState.hovered,
  };

 static final redStateColor = MaterialStateProperty.resolveWith((state) {
    if (state.contains(MaterialState.disabled)) return Colors.grey;

    if (state.any(_interactiveStates.contains)) return Colors.green;

    if (state.contains(MaterialState.hovered)) return Colors.blue;

    return Colors.red;
  });

[pro100andrey]

@mariogorki94, fixed in 2.0.2

if you want linearly interpolates between two values you should implement lerp(T? a, T? b, double t) for your custom class.

[mariogorki94]

Thanks for the fast fix, appreciate it!