Generate "values" property for ThemeExtensions

[Maatteogekko]

I have the following extension:

@tailorMixinComponent
class MyColors extends ThemeExtension<EpColors> with DiagnosticableTreeMixin, _$MyColorsTailorMixin {
  const MyColors({
    required this.primary
    required this.secondary
  });

  @override
  final Color primary;
  @override
  final Color secondary;

  // other colors...
}

I need to create a color picker with all the colors defined in MyColors. It would be really helpful if the generator could generate a property like the following:

static const values = <String, Color>{
  'primary': primary,
  'secondary': secondary,
  // other colors...
}

I am not sure how this would work if there are properties of different types, maybe the map could be <String, dynamic> and then the values are casted to the correct type. If the type is the same for all properties it should be easy.

[Rongix]

Hello, thank you for opening the issue. This sounds quite specific and might be out of scope for the project. However, I think it could be resolved using debugFillProperties, especially since you are already using it.

For example, in this file: https://github.com/Iteo/theme_tailor/blob/main/packages/theme_tailor/example/lib/tailor_mixin.dart,
debug fill properties look like that:

@override
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
    properties
      ..add(DiagnosticsProperty('type', 'MixedTheme1'))
      ..add(DiagnosticsProperty('background', background))
      ..add(DiagnosticsProperty('foreground', foreground))
      ..add(DiagnosticsProperty('textStyle', textStyle))
      ..add(DiagnosticsProperty('ok', ok));
  }

It's quite similar to what you want, so I'd advise you to map over it after you use it with your custom DiagnosticPropertiesBuilder like in the sample below. Since you may expect several types, you can write some code to match by type.

// Create a DiagnosticPropertiesBuilder
final builder = DiagnosticPropertiesBuilder();

// Use debugFillProperties with your custom DiagnosticPropertiesBuilder
const MixedTheme1(
  foreground: Colors.black,
  textStyle: TextStyle(color: Colors.pink),
  ok: MixedTheme2(foreground: Colors.white),
).debugFillProperties(builder);

// Convert properties to a map
final map = Map.fromEntries(
  builder.properties.map((e) => MapEntry(e.name, e.value)),
);
print(map);

// Loop through the map entries and switch by type
for (final entry in map.entries) {
  switch (entry.value.runtimeType) {
    case TextStyle:
      // Cast as TextStyle and do your processing
      print('${entry.value} is a TextStyle');
      break;
    case Color:
      print('${entry.value} is a Color');
      break;
  }
}

I hope this helps!

[Maatteogekko]

@Rongix Thank you for the suggestion! I can work with that.

Anyway I think it would be a useful addition to the package if something like that could be generated, so that theme components would feel more like enums (see Enum's values)