Ecosystem/cake_wallet
1
0
Fork 0
mirror of https://github.com/cake-tech/cake_wallet.git synced 2024-12-23 12:09:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: create FilterTheme

Browse source
This commit is contained in:
Rafael Saes 2023-07-03 17:37:38 -03:00
parent 4e35ba2b5d
commit ca600b4cee
13 changed files with 140 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
lib/src/screens/dashboard/widgets/header_row.dart
View file

@ -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<FilterTheme>()!.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<FilterTheme>()!.buttonColor),
child: filterIcon,
),
)

9
lib/src/screens/ionia/cards/ionia_manage_cards_page.dart
View file

@ -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<FilterTheme>()!.iconColor,
),
)
);
@ -238,8 +239,8 @@ class _IoniaManageCardsPageBodyState extends State<IoniaManageCardsPageBody> {
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<FilterTheme>()!.iconColor.withOpacity(0.05),
thumbColor: Theme.of(context).extension<FilterTheme>()!.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<FilterTheme>()!.iconColor,
),
);

6
lib/src/screens/new_wallet/widgets/select_button.dart
View file

@ -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<FilterTheme>()!.titlesColor;
final selectArrowImage = Image.asset('assets/images/select_arrow.png',
color: arrowColor);

3
lib/src/screens/nodes/widgets/node_list_row.dart
View file

@ -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<FilterTheme>()!.titlesColor,size: 24.0),
);
}
}

6
lib/src/widgets/check_box_picker.dart
View file

@ -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<CheckBoxPicker> {
value: item.value,
activeColor: item.value
? Palette.blueCraiola
: Theme.of(context)
.accentTextTheme!
.titleMedium!
.decorationColor!,
: Theme.of(context).extension<FilterTheme>()!.checkboxBackgroundColor,
checkColor: Colors.white,
title: widget.displayItem?.call(item) ??
Text(

11
lib/src/widgets/checkbox_widget.dart
View file

@ -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<CheckboxWidget> {
decoration: BoxDecoration(
color: value
? Palette.blueCraiola
: Theme.of(context)
.accentTextTheme!
.titleMedium!
.decorationColor!,
: Theme.of(context).extension<FilterTheme>()!.checkboxBackgroundColor,
borderRadius: BorderRadius.all(Radius.circular(2)),
border: Border.all(
color: value
? Palette.blueCraiola
: Theme.of(context)
.accentTextTheme!
.labelSmall!
.color!,
: Theme.of(context).extension<FilterTheme>()!.checkboxBoundsColor,
width: 1)),
child: value
? Center(

21
lib/themes/bright_theme.dart
View file

@ -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)
),
));
}

24
lib/themes/dark_theme.dart
View file

@ -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)
),
),
);
}

18
lib/themes/extensions/dashboard_page_theme.dart
View file

@ -1,3 +1,4 @@
import 'package:cake_wallet/themes/extensions/indicator_dot_theme.dart';
import 'package:flutter/material.dart';
class DashboardPageTheme extends ThemeExtension<DashboardPageTheme> {
@ -6,21 +7,22 @@ class DashboardPageTheme extends ThemeExtension<DashboardPageTheme> {
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<DashboardPageTheme> {
this.secondGradientBackgroundColor,
thirdGradientBackgroundColor:
thirdGradientBackgroundColor ?? this.thirdGradientBackgroundColor,
textColor: textColor ?? this.textColor);
textColor: textColor ?? this.textColor,
indicatorDotTheme: indicatorDotTheme ?? this.indicatorDotTheme);
@override
DashboardPageTheme lerp(ThemeExtension<DashboardPageTheme>? other, double t) {
@ -46,6 +49,7 @@ class DashboardPageTheme extends ThemeExtension<DashboardPageTheme> {
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));
}
}

53
lib/themes/extensions/filter_theme.dart Normal file
View file

@ -0,0 +1,53 @@
import 'package:flutter/material.dart';
class FilterTheme extends ThemeExtension<FilterTheme> {
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<FilterTheme>? 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);
}
}

30
lib/themes/extensions/indicator_dot_theme.dart Normal file
View file

@ -0,0 +1,30 @@
import 'package:flutter/material.dart';
class IndicatorDotTheme extends ThemeExtension<IndicatorDotTheme> {
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<IndicatorDotTheme>? 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);
}
}

22
lib/themes/light_theme.dart
View file

@ -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)
),
),
);
}

4
lib/themes/theme_base.dart
View file

@ -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),