[Feature] InheritedAttribute - Extend Mix functionality with custom attributes.

[pbissonho]

@leoafarias Hello, excellent work here! This lib is amazing!

Currently not is possible to use Mix in components not yet supported by the lib, such as TextField and DropdownButton.

I worked on an implementation that makes possible to create new attributes and consume them from the context so that it is possible to work with the Mix in any component.

Related issues:
#93, #91 and #46;

Design

Create the extended inherited attribute

class InputDecorationThemeAttribute extends InputDecorationTheme
    implements InheritedAttribute<InputDecorationThemeAttribute> {
  const InputDecorationThemeAttribute({
    Color? iconColor,
    Color? fillColor,
    InputBorder? border,
  }) : super(
          iconColor: iconColor,
          fillColor: fillColor,
          border: border,
        );

  @override
  InputDecorationThemeAttribute merge(InputDecorationThemeAttribute other) {
    return InputDecorationThemeAttribute(
      iconColor: other.iconColor ?? iconColor,
      fillColor: other.fillColor ?? fillColor,
      border: other.border ?? border,
    );
  }

  static InputDecorationThemeAttribute inputDecoration(
      {Color? iconColor,
      Color? fillColor,
      InputBorder? border,
      Color? hoverColor,
      InputBorder? enabledBorder}) {
    return InputDecorationThemeAttribute(
      iconColor: iconColor ?? iconColor,
      fillColor: fillColor ?? fillColor,
      border: border ?? border,
    );
  }

  @override
  Object get type => InputDecorationThemeAttribute;
}

Define a short utils

const inputDecoration = InputDecorationThemeAttribute.inputDecoration;

Create a Mix

final inputDecorationMix = Mix(
        inputDecoration(
          border: const UnderlineInputBorder(
            borderSide: BorderSide(color: Colors.grey),
          ),
        ),
        myVariant(
          inputDecoration(
            enabledBorder: const UnderlineInputBorder(
              borderSide: BorderSide(color: Colors.yellow),
            ),
          ),
        ),
      )

Consume attributes from mixContext

   ...

 @override
  Widget build(BuildContext context) {
    return MixContextBuilder(
      mix: inputDecorationMix,
      builder: (context, mixContext) {
        final inputDecorationTheme =
            mixContext.fromType<InputDecorationThemeAttribute>();

        return TextFormField(
          decoration: const InputDecoration(
            filled: true,
            labelText: 'Label Text',
            suffixIcon: Icon(
              Icons.check_circle,
            ),
          ).applyDefaults(inputDecorationTheme),
        );
      },
    );
  }

Reference

The implementation is based from: https://api.flutter.dev/flutter/material/ThemeData/extensions.html

[leoafarias]

LGTM

[leoafarias]

@pbissonho looks good, that is a great contribution. Might make some small adjustments as this feature matures, but I think its good to be merged!

[allcontributors]

@leoafarias

@pbissonho already contributed before to code, ideas