From fcec273bb11d6472c786ab82909b07a5bb75deba Mon Sep 17 00:00:00 2001 From: Joshua Tang Date: Wed, 19 Jul 2023 14:54:54 +1000 Subject: [PATCH] refactor: material states card to support dropdown widget --- lib/basic_theme/view/basic_theme_editor.dart | 14 +-- .../view/abstract_button_style_editor.dart | 6 +- .../abstract_flat_button_style_editor.dart | 4 +- .../elevated_button_theme_editor.dart | 4 +- .../view/checkbox_theme_editor.dart | 6 +- lib/radio_theme/view/radio_theme_editor.dart | 4 +- .../view/switch_theme_editor.dart | 6 +- lib/widgets/cards/material_states_card.dart | 89 +++++++++++-------- 8 files changed, 73 insertions(+), 60 deletions(-) diff --git a/lib/basic_theme/view/basic_theme_editor.dart b/lib/basic_theme/view/basic_theme_editor.dart index e6a7e12a..804bec29 100644 --- a/lib/basic_theme/view/basic_theme_editor.dart +++ b/lib/basic_theme/view/basic_theme_editor.dart @@ -55,7 +55,7 @@ class _PrimaryColorPickers extends StatelessWidget { final cubit = context.read(); final colorScheme = context.watch().state.colorScheme; - return MaterialStatesCard( + return MaterialStatesCard( header: 'Primary colors', items: [ MaterialStateItem( @@ -98,7 +98,7 @@ class _SecondaryColorPickers extends StatelessWidget { final cubit = context.read(); final colorScheme = context.watch().state.colorScheme; - return MaterialStatesCard( + return MaterialStatesCard( header: 'Secondary colors', items: [ MaterialStateItem( @@ -140,7 +140,7 @@ class _TertiaryColorPickers extends StatelessWidget { final cubit = context.read(); final colorScheme = context.watch().state.colorScheme; - return MaterialStatesCard( + return MaterialStatesCard( header: 'Tertiary colors', items: [ MaterialStateItem( @@ -182,7 +182,7 @@ class _ErrorColorPickers extends StatelessWidget { final cubit = context.read(); final colorScheme = context.watch().state.colorScheme; - return MaterialStatesCard( + return MaterialStatesCard( header: 'Error colors', items: [ MaterialStateItem( @@ -224,7 +224,7 @@ class _NeutralColorPickers extends StatelessWidget { final cubit = context.read(); final colorScheme = context.watch().state.colorScheme; - return MaterialStatesCard( + return MaterialStatesCard( header: 'Neutral colors', items: [ MaterialStateItem( @@ -266,7 +266,7 @@ class _NeutralVariantColorPickers extends StatelessWidget { final cubit = context.read(); final colorScheme = context.watch().state.colorScheme; - return MaterialStatesCard( + return MaterialStatesCard( header: 'Neutral variant colors', items: [ MaterialStateItem( @@ -308,7 +308,7 @@ class _InverseColorPickers extends StatelessWidget { final cubit = context.read(); final colorScheme = context.watch().state.colorScheme; - return MaterialStatesCard( + return MaterialStatesCard( header: 'Inverse colors', items: [ MaterialStateItem( diff --git a/lib/button_theme/abstract_button_style/view/abstract_button_style_editor.dart b/lib/button_theme/abstract_button_style/view/abstract_button_style_editor.dart index 6ae7a40c..0aff4c70 100644 --- a/lib/button_theme/abstract_button_style/view/abstract_button_style_editor.dart +++ b/lib/button_theme/abstract_button_style/view/abstract_button_style_editor.dart @@ -37,7 +37,7 @@ abstract class AbstractButtonStyleEditor final color = context.watch().state.style?.foregroundColor; final colorScheme = context.watch().state.colorScheme; - return MaterialStatesCard( + return MaterialStatesCard( header: 'Foreground color', tooltip: AbstractButtonStyleDocs.foregroundColor, items: [ @@ -64,7 +64,7 @@ abstract class AbstractButtonStyleEditor final color = context.watch().state.style?.overlayColor; final colorScheme = context.watch().state.colorScheme; - return MaterialStatesCard( + return MaterialStatesCard( header: 'Overlay color', tooltip: AbstractButtonStyleDocs.overlayColor, items: [ @@ -97,7 +97,7 @@ abstract class AbstractButtonStyleEditor final shadowColor = context.watch().state.style?.shadowColor; final themeShadowColor = context.watch().state.shadowColor; - return MaterialStatesCard( + return MaterialStatesCard( header: 'Shadow color', tooltip: AbstractButtonStyleDocs.shadowColor, items: [ diff --git a/lib/button_theme/abstract_flat_button_style/abstract_flat_button_style_editor.dart b/lib/button_theme/abstract_flat_button_style/abstract_flat_button_style_editor.dart index 43867b68..fede0339 100644 --- a/lib/button_theme/abstract_flat_button_style/abstract_flat_button_style_editor.dart +++ b/lib/button_theme/abstract_flat_button_style/abstract_flat_button_style_editor.dart @@ -37,7 +37,7 @@ abstract class AbstractFlatButtonStyleEditor< Widget buildBackgroundColorPickers(BuildContext context) { final color = context.watch().state.style?.backgroundColor; - return MaterialStatesCard( + return MaterialStatesCard( header: 'Background color', tooltip: AbstractButtonStyleDocs.backgroundColor, items: [ @@ -57,7 +57,7 @@ abstract class AbstractFlatButtonStyleEditor< Widget buildElevationTextFields(BuildContext context) { return BlocBuilder( builder: (context, state) { - return MaterialStatesCard( + return MaterialStatesCard( header: 'Elevation', tooltip: AbstractButtonStyleDocs.elevation, items: [ diff --git a/lib/button_theme/elevated_button_theme/elevated_button_theme_editor.dart b/lib/button_theme/elevated_button_theme/elevated_button_theme_editor.dart index 0b8dd70c..997a5d4a 100644 --- a/lib/button_theme/elevated_button_theme/elevated_button_theme_editor.dart +++ b/lib/button_theme/elevated_button_theme/elevated_button_theme_editor.dart @@ -45,7 +45,7 @@ class ElevatedButtonThemeEditor context.watch().state.style?.backgroundColor; final colorScheme = context.watch().state.colorScheme; - return MaterialStatesCard( + return MaterialStatesCard( header: 'Background color', tooltip: AbstractButtonStyleDocs.backgroundColor, items: [ @@ -73,7 +73,7 @@ class ElevatedButtonThemeEditor final cubit = context.read(); final elevation = state.style?.elevation; - return MaterialStatesCard( + return MaterialStatesCard( header: 'Elevation', tooltip: AbstractButtonStyleDocs.elevation, items: [ diff --git a/lib/checkbox_theme/view/checkbox_theme_editor.dart b/lib/checkbox_theme/view/checkbox_theme_editor.dart index ba56669b..9090d667 100644 --- a/lib/checkbox_theme/view/checkbox_theme_editor.dart +++ b/lib/checkbox_theme/view/checkbox_theme_editor.dart @@ -34,7 +34,7 @@ class _FillColorPickers extends StatelessWidget { final fillColor = context.watch().state.theme.fillColor; final colorThemeState = context.watch().state; - return MaterialStatesCard( + return MaterialStatesCard( header: 'Fill color', tooltip: CheckboxThemeDocs.fillColor, items: [ @@ -69,7 +69,7 @@ class _CheckColorPickers extends StatelessWidget { Widget build(BuildContext context) { return BlocBuilder( builder: (context, state) { - return MaterialStatesCard( + return MaterialStatesCard( header: 'Check color', tooltip: CheckboxThemeDocs.checkColor, items: [ @@ -96,7 +96,7 @@ class _OverlayColorPickers extends StatelessWidget { context.watch().state.theme.overlayColor; final colorThemeState = context.watch().state; - return MaterialStatesCard( + return MaterialStatesCard( header: 'Overlay color', tooltip: CheckboxThemeDocs.overlayColor, items: [ diff --git a/lib/radio_theme/view/radio_theme_editor.dart b/lib/radio_theme/view/radio_theme_editor.dart index 4d8896a5..f512df19 100644 --- a/lib/radio_theme/view/radio_theme_editor.dart +++ b/lib/radio_theme/view/radio_theme_editor.dart @@ -33,7 +33,7 @@ class _FillColorPickers extends StatelessWidget { final fillColor = context.watch().state.theme.fillColor; final colorThemeState = context.watch().state; - return MaterialStatesCard( + return MaterialStatesCard( header: 'Fill color', tooltip: RadioThemeDocs.fillColor, items: [ @@ -71,7 +71,7 @@ class _OverlayColorPickers extends StatelessWidget { context.watch().state.theme.overlayColor; final colorThemeState = context.watch().state; - return MaterialStatesCard( + return MaterialStatesCard( header: 'Overlay color', tooltip: RadioThemeDocs.overlayColor, items: [ diff --git a/lib/switch_theme/view/switch_theme_editor.dart b/lib/switch_theme/view/switch_theme_editor.dart index aa245509..16d396ae 100644 --- a/lib/switch_theme/view/switch_theme_editor.dart +++ b/lib/switch_theme/view/switch_theme_editor.dart @@ -34,7 +34,7 @@ class _ThumbColorPickers extends StatelessWidget { final thumbColor = context.watch().state.theme.thumbColor; final primaryColor = context.watch().state.primaryColor; - return MaterialStatesCard( + return MaterialStatesCard( header: 'Thumb color', tooltip: SwitchThemeDocs.thumbColor, items: [ @@ -69,7 +69,7 @@ class _TrackColorPickers extends StatelessWidget { final trackColor = context.watch().state.theme.trackColor; final primaryColor = context.watch().state.primaryColor; - return MaterialStatesCard( + return MaterialStatesCard( header: 'Track color', tooltip: SwitchThemeDocs.trackColor, items: [ @@ -106,7 +106,7 @@ class _OverlayColorPickers extends StatelessWidget { context.watch().state.theme.overlayColor; final colorThemeState = context.watch().state; - return MaterialStatesCard( + return MaterialStatesCard( header: 'Overlay color', tooltip: SwitchThemeDocs.overlayColor, items: [ diff --git a/lib/widgets/cards/material_states_card.dart b/lib/widgets/cards/material_states_card.dart index 6a4d6755..4cc813f8 100644 --- a/lib/widgets/cards/material_states_card.dart +++ b/lib/widgets/cards/material_states_card.dart @@ -1,23 +1,9 @@ -import 'package:flutter/material.dart'; import 'package:appainter/widgets/widgets.dart'; +import 'package:flutter/material.dart'; -class MaterialStateItem { - final Key? key; - final String title; - final String? tooltip; - final T value; - final ValueChanged onValueChanged; - final bool colorEnableOpacity; - - const MaterialStateItem({ - required this.title, - required this.value, - required this.onValueChanged, - this.key, - this.tooltip, - this.colorEnableOpacity = true, - }); -} +typedef MaterialStateColorPicker = Color; +typedef MaterialStateTextField = String; +typedef MaterialStateDropdown = String; class MaterialStatesCard extends StatelessWidget { final String header; @@ -29,13 +15,16 @@ class MaterialStatesCard extends StatelessWidget { required this.header, required this.items, this.tooltip, - }) : super(key: key); + }) : assert(T == MaterialStateColorPicker || + T == MaterialStateTextField || + T == MaterialStateDropdown), // coverage:ignore-line + super(key: key); @override Widget build(BuildContext context) { return MyCard( color: Theme.of(context).brightness == Brightness.dark - ? Colors.grey[700] + ? Colors.grey[700] // coverage:ignore-line : Colors.grey[100], child: Column( crossAxisAlignment: CrossAxisAlignment.start, @@ -65,6 +54,26 @@ class MaterialStatesCard extends StatelessWidget { } } +class MaterialStateItem { + final Key? key; + final String title; + final String? tooltip; + final T value; + final ValueChanged onValueChanged; + final bool colorEnableOpacity; + + const MaterialStateItem({ + required this.title, + required this.value, + required this.onValueChanged, + this.key, + this.tooltip, + this.colorEnableOpacity = true, + }) : assert(T == MaterialStateColorPicker || + T == MaterialStateTextField || + T == MaterialStateDropdown); // coverage:ignore-line +} + class _Header extends StatelessWidget { final String header; final String? tooltip; @@ -101,27 +110,31 @@ class _StateListTile extends StatelessWidget { required this.onValueChanged, this.tooltip, this.colorEnableOpacity = true, - }) : super(key: key); + }) : assert(T == MaterialStateColorPicker || + T == MaterialStateTextField || + T == MaterialStateDropdown), // coverage:ignore-line + super(key: key); @override Widget build(BuildContext context) { - if (T == Color) { - return ColorListTile( - title: title, - tooltip: tooltip, - color: value as Color, - onColorChanged: onValueChanged as ValueChanged, - enableOpacity: colorEnableOpacity, - ); - } else if (T == String) { - return MyTextFormField( - labelText: title, - tooltip: tooltip, - initialValue: value as String, - onChanged: onValueChanged as ValueChanged, - ); - } else { - throw Exception('Unsupported type: $T'); + switch (T) { + case MaterialStateColorPicker: + return ColorListTile( + title: title, + tooltip: tooltip, + color: value as Color, + onColorChanged: onValueChanged as ValueChanged, + enableOpacity: colorEnableOpacity, + ); + case MaterialStateTextField: + return MyTextFormField( + labelText: title, + tooltip: tooltip, + initialValue: value as String, + onChanged: onValueChanged as ValueChanged, + ); + default: + throw Exception('Unsupported type: $T'); // coverage:ignore-line } } }