From ca600b4ceeecd1635a0866434de059f58d8549cd Mon Sep 17 00:00:00 2001 From: Rafael Saes Date: Mon, 3 Jul 2023 17:37:38 -0300 Subject: [PATCH] refactor: create FilterTheme --- .../screens/dashboard/widgets/header_row.dart | 5 +- .../ionia/cards/ionia_manage_cards_page.dart | 9 ++-- .../new_wallet/widgets/select_button.dart | 6 +-- .../screens/nodes/widgets/node_list_row.dart | 3 +- lib/src/widgets/check_box_picker.dart | 6 +-- lib/src/widgets/checkbox_widget.dart | 11 ++-- lib/themes/bright_theme.dart | 21 +++----- lib/themes/dark_theme.dart | 24 ++++----- .../extensions/dashboard_page_theme.dart | 18 ++++--- lib/themes/extensions/filter_theme.dart | 53 +++++++++++++++++++ .../extensions/indicator_dot_theme.dart | 30 +++++++++++ lib/themes/light_theme.dart | 22 ++++---- lib/themes/theme_base.dart | 4 ++ 13 files changed, 140 insertions(+), 72 deletions(-) create mode 100644 lib/themes/extensions/filter_theme.dart create mode 100644 lib/themes/extensions/indicator_dot_theme.dart diff --git a/lib/src/screens/dashboard/widgets/header_row.dart b/lib/src/screens/dashboard/widgets/header_row.dart index 659e5e374..168a58a54 100644 --- a/lib/src/screens/dashboard/widgets/header_row.dart +++ b/lib/src/screens/dashboard/widgets/header_row.dart @@ -1,4 +1,5 @@ import 'package:cake_wallet/src/screens/dashboard/widgets/filter_widget.dart'; +import 'package:cake_wallet/themes/extensions/filter_theme.dart'; import 'package:cake_wallet/utils/show_pop_up.dart'; import 'package:flutter/material.dart'; import 'package:cake_wallet/generated/i18n.dart'; @@ -13,7 +14,7 @@ class HeaderRow extends StatelessWidget { @override Widget build(BuildContext context) { final filterIcon = Image.asset('assets/images/filter_icon.png', - color: Theme.of(context).textTheme!.bodySmall!.decorationColor!); + color: Theme.of(context).extension()!.iconColor); return Container( height: 52, @@ -43,7 +44,7 @@ class HeaderRow extends StatelessWidget { width: 36, decoration: BoxDecoration( shape: BoxShape.circle, - color: Theme.of(context).textTheme!.labelSmall!.color!), + color: Theme.of(context).extension()!.buttonColor), child: filterIcon, ), ) diff --git a/lib/src/screens/ionia/cards/ionia_manage_cards_page.dart b/lib/src/screens/ionia/cards/ionia_manage_cards_page.dart index 77d9e94da..db373a6ca 100644 --- a/lib/src/screens/ionia/cards/ionia_manage_cards_page.dart +++ b/lib/src/screens/ionia/cards/ionia_manage_cards_page.dart @@ -20,6 +20,7 @@ import 'package:cake_wallet/generated/i18n.dart'; import 'package:flutter_mobx/flutter_mobx.dart'; import 'package:cake_wallet/themes/extensions/dashboard_page_theme.dart'; import 'package:cake_wallet/themes/extensions/balance_page_theme.dart'; +import 'package:cake_wallet/themes/extensions/filter_theme.dart'; class IoniaManageCardsPage extends BasePage { IoniaManageCardsPage(this._cardsListViewModel): searchFocusNode = FocusNode() { @@ -125,7 +126,7 @@ class IoniaManageCardsPage extends BasePage { ), child: Image.asset( 'assets/images/filter.png', - color: Theme.of(context).textTheme!.bodySmall!.decorationColor!, + color: Theme.of(context).extension()!.iconColor, ), ) ); @@ -238,8 +239,8 @@ class _IoniaManageCardsPageBodyState extends State { thumbHeight: thumbHeight, rightOffset: 1, width: 3, - backgroundColor: Theme.of(context).textTheme!.bodySmall!.decorationColor!.withOpacity(0.05), - thumbColor: Theme.of(context).textTheme!.bodySmall!.decorationColor!.withOpacity(0.5), + backgroundColor: Theme.of(context).extension()!.iconColor.withOpacity(0.05), + thumbColor: Theme.of(context).extension()!.iconColor.withOpacity(0.5), fromTop: widget.cardsListViewModel.scrollOffsetFromTop, ) : Offstage() @@ -270,7 +271,7 @@ class _SearchWidget extends StatelessWidget { padding: EdgeInsets.all(8), child: Image.asset( 'assets/images/mini_search_icon.png', - color: Theme.of(context).textTheme!.bodySmall!.decorationColor!, + color: Theme.of(context).extension()!.iconColor, ), ); diff --git a/lib/src/screens/new_wallet/widgets/select_button.dart b/lib/src/screens/new_wallet/widgets/select_button.dart index a88e09f25..8257d94ce 100644 --- a/lib/src/screens/new_wallet/widgets/select_button.dart +++ b/lib/src/screens/new_wallet/widgets/select_button.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:cake_wallet/themes/extensions/filter_theme.dart'; class SelectButton extends StatelessWidget { SelectButton({ @@ -29,10 +30,7 @@ class SelectButton extends StatelessWidget { .accentTextTheme! .headlineSmall! .decorationColor! - : Theme.of(context) - .accentTextTheme! - .titleMedium! - .color!; + : Theme.of(context).extension()!.titlesColor; final selectArrowImage = Image.asset('assets/images/select_arrow.png', color: arrowColor); diff --git a/lib/src/screens/nodes/widgets/node_list_row.dart b/lib/src/screens/nodes/widgets/node_list_row.dart index 6169c6df4..2a803f875 100644 --- a/lib/src/screens/nodes/widgets/node_list_row.dart +++ b/lib/src/screens/nodes/widgets/node_list_row.dart @@ -1,6 +1,7 @@ import 'package:cake_wallet/src/screens/nodes/widgets/node_indicator.dart'; import 'package:cake_wallet/src/widgets/standard_list.dart'; import 'package:flutter/material.dart'; +import 'package:cake_wallet/themes/extensions/filter_theme.dart'; class NodeListRow extends StandardListRow { NodeListRow( @@ -36,7 +37,7 @@ class NodeHeaderListRow extends StandardListRow { return SizedBox( width: 20, child: Icon(Icons.add, - color: Theme.of(context).accentTextTheme!.titleMedium!.color,size: 24.0), + color: Theme.of(context).extension()!.titlesColor,size: 24.0), ); } } diff --git a/lib/src/widgets/check_box_picker.dart b/lib/src/widgets/check_box_picker.dart index bc152088f..412d62476 100644 --- a/lib/src/widgets/check_box_picker.dart +++ b/lib/src/widgets/check_box_picker.dart @@ -2,6 +2,7 @@ import 'package:cake_wallet/palette.dart'; import 'package:cake_wallet/utils/responsive_layout_util.dart'; import 'package:flutter/material.dart'; import 'package:cake_wallet/src/widgets/picker_wrapper_widget.dart'; +import 'package:cake_wallet/themes/extensions/filter_theme.dart'; class CheckBoxPicker extends StatefulWidget { CheckBoxPicker({ @@ -125,10 +126,7 @@ class CheckBoxPickerState extends State { value: item.value, activeColor: item.value ? Palette.blueCraiola - : Theme.of(context) - .accentTextTheme! - .titleMedium! - .decorationColor!, + : Theme.of(context).extension()!.checkboxBackgroundColor, checkColor: Colors.white, title: widget.displayItem?.call(item) ?? Text( diff --git a/lib/src/widgets/checkbox_widget.dart b/lib/src/widgets/checkbox_widget.dart index a2603ad19..560187050 100644 --- a/lib/src/widgets/checkbox_widget.dart +++ b/lib/src/widgets/checkbox_widget.dart @@ -2,6 +2,7 @@ import 'dart:ui'; import 'package:cake_wallet/palette.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; +import 'package:cake_wallet/themes/extensions/filter_theme.dart'; class CheckboxWidget extends StatefulWidget { CheckboxWidget({ @@ -42,18 +43,12 @@ class CheckboxWidgetState extends State { decoration: BoxDecoration( color: value ? Palette.blueCraiola - : Theme.of(context) - .accentTextTheme! - .titleMedium! - .decorationColor!, + : Theme.of(context).extension()!.checkboxBackgroundColor, borderRadius: BorderRadius.all(Radius.circular(2)), border: Border.all( color: value ? Palette.blueCraiola - : Theme.of(context) - .accentTextTheme! - .labelSmall! - .color!, + : Theme.of(context).extension()!.checkboxBoundsColor, width: 1)), child: value ? Center( diff --git a/lib/themes/bright_theme.dart b/lib/themes/bright_theme.dart index 552b957d3..ffe7c6e5e 100644 --- a/lib/themes/bright_theme.dart +++ b/lib/themes/bright_theme.dart @@ -1,6 +1,7 @@ import 'package:cake_wallet/themes/extensions/balance_page_theme.dart'; import 'package:cake_wallet/themes/extensions/dashboard_page_theme.dart'; import 'package:cake_wallet/themes/extensions/exchange_page_theme.dart'; +import 'package:cake_wallet/themes/extensions/filter_theme.dart'; import 'package:cake_wallet/themes/extensions/indicator_dot_theme.dart'; import 'package:cake_wallet/themes/extensions/menu_theme.dart'; import 'package:cake_wallet/themes/extensions/new_wallet_theme.dart'; @@ -62,6 +63,12 @@ class BrightTheme extends LightTheme { headerSecondGradientColor: Palette.pinkFlamingo, iconColor: PaletteDark.pigeonBlue); + @override + FilterTheme get filterTheme => super.filterTheme.copyWith( + checkboxBackgroundColor: Colors.white, + buttonColor: Colors.white.withOpacity(0.2), + iconColor: Colors.white); + @override ThemeData get themeData => super.themeData.copyWith( indicatorColor: Colors.white.withOpacity(0.5), // page indicator @@ -69,11 +76,7 @@ class BrightTheme extends LightTheme { dividerColor: Palette.paleBlue, hintColor: Palette.gray, textTheme: TextTheme( - bodySmall: TextStyle( - decorationColor: Colors.white, // filter icon - ), labelSmall: TextStyle( - color: Colors.white.withOpacity(0.2), // filter button backgroundColor: Colors.white.withOpacity(0.5), // date section row decorationColor: Colors.white @@ -193,15 +196,5 @@ class BrightTheme extends LightTheme { decorationColor: Colors .white // restore wallet button text color (wallet list page) ), - // subhead -> titleMedium - titleMedium: TextStyle( - color: Palette.darkGray, // titles color (filter widget) - backgroundColor: - Palette.periwinkle, // divider color (filter widget) - decorationColor: Colors.white // checkbox background (filter widget) - ), - labelSmall: TextStyle( - color: Palette.wildPeriwinkle, // checkbox bounds (filter widget) - ), )); } diff --git a/lib/themes/dark_theme.dart b/lib/themes/dark_theme.dart index 4640584e3..da7a2a757 100644 --- a/lib/themes/dark_theme.dart +++ b/lib/themes/dark_theme.dart @@ -3,6 +3,7 @@ import 'package:cake_wallet/themes/extensions/balance_page_theme.dart'; import 'package:cake_wallet/themes/extensions/cake_scrollbar_theme.dart'; import 'package:cake_wallet/themes/extensions/dashboard_page_theme.dart'; import 'package:cake_wallet/themes/extensions/exchange_page_theme.dart'; +import 'package:cake_wallet/themes/extensions/filter_theme.dart'; import 'package:cake_wallet/themes/extensions/indicator_dot_theme.dart'; import 'package:cake_wallet/themes/extensions/keyboard_theme.dart'; import 'package:cake_wallet/themes/extensions/menu_theme.dart'; @@ -103,6 +104,14 @@ class DarkTheme extends ThemeBase { dividerColor: PaletteDark.darkOceanBlue, iconColor: PaletteDark.pigeonBlue); + @override + FilterTheme get filterTheme => FilterTheme( + checkboxBoundsColor: PaletteDark.wildVioletBlue, + checkboxBackgroundColor: PaletteDark.wildVioletBlue.withOpacity(0.3), + titlesColor: Colors.white, + buttonColor: PaletteDark.oceanBlue, + iconColor: PaletteDark.wildBlue); + @override ThemeData get themeData => super.themeData.copyWith( indicatorColor: PaletteDark.cyanBlue, // page indicator @@ -115,11 +124,7 @@ class DarkTheme extends ThemeBase { .dialogTheme .copyWith(backgroundColor: PaletteDark.nightBlue), textTheme: TextTheme( - bodySmall: TextStyle( - decorationColor: PaletteDark.wildBlue, // filter icon - ), labelSmall: TextStyle( - color: PaletteDark.oceanBlue, // filter button backgroundColor: PaletteDark.darkCyanBlue, // date section row decorationColor: PaletteDark .wildNightBlue // icons (transaction and trade rows) @@ -237,17 +242,6 @@ class DarkTheme extends ThemeBase { decorationColor: Palette .darkBlueCraiola // restore wallet button text color (wallet list page) ), - // subhead -> titleMedium - titleMedium: TextStyle( - color: Colors.white, // titles color (filter widget) - backgroundColor: - PaletteDark.darkOceanBlue, // divider color (filter widget) - decorationColor: PaletteDark.wildVioletBlue - .withOpacity(0.3) // checkbox background (filter widget) - ), - labelSmall: TextStyle( - color: PaletteDark.wildVioletBlue, // checkbox bounds (filter widget) - ), ), ); } diff --git a/lib/themes/extensions/dashboard_page_theme.dart b/lib/themes/extensions/dashboard_page_theme.dart index 783f7635a..039d76db1 100644 --- a/lib/themes/extensions/dashboard_page_theme.dart +++ b/lib/themes/extensions/dashboard_page_theme.dart @@ -1,3 +1,4 @@ +import 'package:cake_wallet/themes/extensions/indicator_dot_theme.dart'; import 'package:flutter/material.dart'; class DashboardPageTheme extends ThemeExtension { @@ -6,21 +7,22 @@ class DashboardPageTheme extends ThemeExtension { final Color thirdGradientBackgroundColor; final Color textColor; + final IndicatorDotTheme? indicatorDotTheme; + DashboardPageTheme( {required this.firstGradientBackgroundColor, required this.secondGradientBackgroundColor, required this.thirdGradientBackgroundColor, - required this.textColor}); - - @override - Object get type => DashboardPageTheme; + required this.textColor, + this.indicatorDotTheme}); @override DashboardPageTheme copyWith( {Color? firstGradientBackgroundColor, Color? secondGradientBackgroundColor, Color? thirdGradientBackgroundColor, - Color? textColor}) => + Color? textColor, + IndicatorDotTheme? indicatorDotTheme}) => DashboardPageTheme( firstGradientBackgroundColor: firstGradientBackgroundColor ?? this.firstGradientBackgroundColor, @@ -28,7 +30,8 @@ class DashboardPageTheme extends ThemeExtension { this.secondGradientBackgroundColor, thirdGradientBackgroundColor: thirdGradientBackgroundColor ?? this.thirdGradientBackgroundColor, - textColor: textColor ?? this.textColor); + textColor: textColor ?? this.textColor, + indicatorDotTheme: indicatorDotTheme ?? this.indicatorDotTheme); @override DashboardPageTheme lerp(ThemeExtension? other, double t) { @@ -46,6 +49,7 @@ class DashboardPageTheme extends ThemeExtension { thirdGradientBackgroundColor: Color.lerp(thirdGradientBackgroundColor, other.thirdGradientBackgroundColor, t) ?? thirdGradientBackgroundColor, - textColor: Color.lerp(textColor, other.textColor, t) ?? textColor); + textColor: Color.lerp(textColor, other.textColor, t) ?? textColor, + indicatorDotTheme: indicatorDotTheme?.lerp(other.indicatorDotTheme, t)); } } diff --git a/lib/themes/extensions/filter_theme.dart b/lib/themes/extensions/filter_theme.dart new file mode 100644 index 000000000..ec96c432d --- /dev/null +++ b/lib/themes/extensions/filter_theme.dart @@ -0,0 +1,53 @@ +import 'package:flutter/material.dart'; + +class FilterTheme extends ThemeExtension { + final Color checkboxBoundsColor; + final Color checkboxBackgroundColor; + final Color titlesColor; + final Color buttonColor; + final Color iconColor; + + FilterTheme( + {required this.checkboxBoundsColor, + required this.checkboxBackgroundColor, + required this.titlesColor, + required this.buttonColor, + required this.iconColor}); + + @override + FilterTheme copyWith({ + Color? checkboxBoundsColor, + Color? checkboxBackgroundColor, + Color? titlesColor, + Color? buttonColor, + Color? iconColor, + }) => + FilterTheme( + checkboxBoundsColor: checkboxBoundsColor ?? this.checkboxBoundsColor, + checkboxBackgroundColor: + checkboxBackgroundColor ?? this.checkboxBackgroundColor, + titlesColor: titlesColor ?? this.titlesColor, + buttonColor: buttonColor ?? this.buttonColor, + iconColor: iconColor ?? this.iconColor, + ); + + @override + FilterTheme lerp(ThemeExtension? other, double t) { + if (other is! FilterTheme) { + return this; + } + + return FilterTheme( + checkboxBoundsColor: + Color.lerp(checkboxBoundsColor, other.checkboxBoundsColor, t) ?? + this.checkboxBoundsColor, + checkboxBackgroundColor: Color.lerp( + checkboxBackgroundColor, other.checkboxBackgroundColor, t) ?? + this.checkboxBackgroundColor, + titlesColor: + Color.lerp(titlesColor, other.titlesColor, t) ?? this.titlesColor, + buttonColor: + Color.lerp(buttonColor, other.buttonColor, t) ?? this.buttonColor, + iconColor: Color.lerp(iconColor, other.iconColor, t) ?? this.iconColor); + } +} diff --git a/lib/themes/extensions/indicator_dot_theme.dart b/lib/themes/extensions/indicator_dot_theme.dart new file mode 100644 index 000000000..f7f482ad6 --- /dev/null +++ b/lib/themes/extensions/indicator_dot_theme.dart @@ -0,0 +1,30 @@ +import 'package:flutter/material.dart'; + +class IndicatorDotTheme extends ThemeExtension { + final Color indicatorColor; + final Color activeIndicatorColor; + + IndicatorDotTheme( + {required this.indicatorColor, required this.activeIndicatorColor}); + + @override + IndicatorDotTheme copyWith( + {Color? indicatorColor, Color? actionButtonColor}) => + IndicatorDotTheme( + indicatorColor: indicatorColor ?? this.indicatorColor, + activeIndicatorColor: actionButtonColor ?? this.activeIndicatorColor); + + @override + IndicatorDotTheme lerp(ThemeExtension? other, double t) { + if (other is! IndicatorDotTheme) { + return this; + } + + return IndicatorDotTheme( + indicatorColor: Color.lerp(indicatorColor, other.indicatorColor, t) ?? + indicatorColor, + activeIndicatorColor: + Color.lerp(activeIndicatorColor, other.activeIndicatorColor, t) ?? + activeIndicatorColor); + } +} diff --git a/lib/themes/light_theme.dart b/lib/themes/light_theme.dart index 247fbc819..2fdb85856 100644 --- a/lib/themes/light_theme.dart +++ b/lib/themes/light_theme.dart @@ -3,6 +3,7 @@ import 'package:cake_wallet/themes/extensions/balance_page_theme.dart'; import 'package:cake_wallet/themes/extensions/cake_scrollbar_theme.dart'; import 'package:cake_wallet/themes/extensions/dashboard_page_theme.dart'; import 'package:cake_wallet/themes/extensions/exchange_page_theme.dart'; +import 'package:cake_wallet/themes/extensions/filter_theme.dart'; import 'package:cake_wallet/themes/extensions/indicator_dot_theme.dart'; import 'package:cake_wallet/themes/extensions/keyboard_theme.dart'; import 'package:cake_wallet/themes/extensions/menu_theme.dart'; @@ -104,6 +105,14 @@ class LightTheme extends ThemeBase { dividerColor: Palette.wildLavender, iconColor: Palette.gray); + @override + FilterTheme get filterTheme => FilterTheme( + checkboxBoundsColor: Palette.wildPeriwinkle, + checkboxBackgroundColor: Colors.white, + titlesColor: Palette.darkGray, + buttonColor: Palette.blueAlice, + iconColor: PaletteDark.wildBlue); + @override ThemeData get themeData => super.themeData.copyWith( indicatorColor: @@ -117,11 +126,7 @@ class LightTheme extends ThemeBase { .dialogTheme .copyWith(backgroundColor: Colors.white), textTheme: TextTheme( - bodySmall: TextStyle( - decorationColor: PaletteDark.wildBlue, // filter icon - ), labelSmall: TextStyle( - color: Palette.blueAlice, // filter button backgroundColor: PaletteDark.darkCyanBlue, // date section row decorationColor: Palette.blueAlice // icons (transaction and trade rows) @@ -238,15 +243,6 @@ class LightTheme extends ThemeBase { decorationColor: Colors .white // restore wallet button text color (wallet list page) ), - // subhead -> titleMedium - titleMedium: TextStyle( - color: Palette.darkGray, // titles color (filter widget) - backgroundColor: Palette.periwinkle, // divider color (filter widget) - decorationColor: Colors.white // checkbox background (filter widget) - ), - labelSmall: TextStyle( - color: Palette.wildPeriwinkle, // checkbox bounds (filter widget) - ), ), ); } diff --git a/lib/themes/theme_base.dart b/lib/themes/theme_base.dart index 158522847..c35515b07 100644 --- a/lib/themes/theme_base.dart +++ b/lib/themes/theme_base.dart @@ -3,6 +3,7 @@ import 'package:cake_wallet/themes/extensions/balance_page_theme.dart'; import 'package:cake_wallet/themes/extensions/cake_scrollbar_theme.dart'; import 'package:cake_wallet/themes/extensions/dashboard_page_theme.dart'; import 'package:cake_wallet/themes/extensions/exchange_page_theme.dart'; +import 'package:cake_wallet/themes/extensions/filter_theme.dart'; import 'package:cake_wallet/themes/extensions/keyboard_theme.dart'; import 'package:cake_wallet/themes/extensions/menu_theme.dart'; import 'package:cake_wallet/themes/extensions/new_wallet_theme.dart'; @@ -67,6 +68,8 @@ abstract class ThemeBase { CakeMenuTheme get menuTheme; + FilterTheme get filterTheme; + ThemeData get themeData => generatedThemeData.copyWith( primaryColor: primaryColor, cardColor: containerColor, @@ -83,6 +86,7 @@ abstract class ThemeBase { balancePageTheme, addressTheme, menuTheme, + filterTheme, ], scrollbarTheme: ScrollbarThemeData( thumbColor: MaterialStateProperty.all(scrollbarTheme.thumbColor),