refactor: create CakeMenuTheme

This commit is contained in:
Rafael Saes 2023-07-03 16:39:48 -03:00
parent e67e07dd7b
commit 4e35ba2b5d
10 changed files with 108 additions and 72 deletions

View file

@ -1,6 +1,7 @@
import 'package:cake_wallet/src/screens/dashboard/widgets/filter_tile.dart';
import 'package:cake_wallet/src/widgets/section_divider.dart';
import 'package:cake_wallet/src/widgets/standard_checkbox.dart';
import 'package:cake_wallet/themes/extensions/menu_theme.dart';
import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart';
import 'package:flutter/material.dart';
import 'package:cake_wallet/src/widgets/picker_wrapper_widget.dart';
@ -23,7 +24,7 @@ class FilterWidget extends StatelessWidget {
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(24)),
child: Container(
color: Theme.of(context).textTheme!.bodyLarge!.decorationColor!,
color: Theme.of(context).extension<CakeMenuTheme>()!.backgroundColor,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [

View file

@ -1,5 +1,6 @@
import 'package:cake_wallet/src/widgets/setting_action_button.dart';
import 'package:cake_wallet/src/widgets/setting_actions.dart';
import 'package:cake_wallet/themes/extensions/menu_theme.dart';
import 'package:flutter/material.dart';
import 'package:cake_wallet/palette.dart';
import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart';
@ -84,15 +85,9 @@ class MenuWidgetState extends State<MenuWidget> {
final itemCount = SettingActions.all.length;
moneroIcon = Image.asset('assets/images/monero_menu.png',
color: Theme.of(context)
.accentTextTheme!
.labelSmall!
.decorationColor!);
color: Theme.of(context).extension<CakeMenuTheme>()!.subnameTextColor);
bitcoinIcon = Image.asset('assets/images/bitcoin_menu.png',
color: Theme.of(context)
.accentTextTheme!
.labelSmall!
.decorationColor!);
color: Theme.of(context).extension<CakeMenuTheme>()!.subnameTextColor);
litecoinIcon = Image.asset('assets/images/litecoin_menu.png');
havenIcon = Image.asset('assets/images/haven_menu.png');
@ -115,7 +110,7 @@ class MenuWidgetState extends State<MenuWidget> {
topLeft: Radius.circular(24), bottomLeft: Radius.circular(24)),
child: Container(
color:
Theme.of(context).textTheme!.bodyLarge!.decorationColor!,
Theme.of(context).extension<CakeMenuTheme>()!.backgroundColor,
child: ListView.separated(
padding: EdgeInsets.only(top: 0),
itemBuilder: (_, index) {
@ -124,14 +119,8 @@ class MenuWidgetState extends State<MenuWidget> {
height: headerHeight,
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Theme.of(context)
.accentTextTheme!
.headlineMedium!
.color!,
Theme.of(context)
.accentTextTheme!
.headlineMedium!
.decorationColor!, ], begin: Alignment.topLeft, end: Alignment.bottomRight),
Theme.of(context).extension<CakeMenuTheme>()!.headerFirstGradientColor,
Theme.of(context).extension<CakeMenuTheme>()!.headerSecondGradientColor, ], begin: Alignment.topLeft, end: Alignment.bottomRight),
),
padding: EdgeInsets.only(
left: 24, top: fromTopEdge, right: 24, bottom: fromBottomEdge),
@ -160,10 +149,7 @@ class MenuWidgetState extends State<MenuWidget> {
builder: (_) => Text(
widget.dashboardViewModel.subname,
style: TextStyle(
color: Theme.of(context)
.accentTextTheme!
.labelSmall!
.decorationColor!,
color: Theme.of(context).extension<CakeMenuTheme>()!.subnameTextColor,
fontWeight: FontWeight.w500,
fontSize: 12),
))
@ -194,10 +180,7 @@ class MenuWidgetState extends State<MenuWidget> {
},
separatorBuilder: (_, index) => Container(
height: 1,
color: Theme.of(context)
.primaryTextTheme!
.bodySmall!
.decorationColor!,
color: Theme.of(context).extension<CakeMenuTheme>()!.dividerColor,
),
itemCount: itemCount + 1),
)))

View file

@ -5,6 +5,7 @@ import 'package:cake_wallet/themes/extensions/exchange_page_theme.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:cake_wallet/src/widgets/alert_background.dart';
import 'package:cake_wallet/themes/extensions/menu_theme.dart';
class InformationPage extends StatelessWidget {
InformationPage({required this.information});
@ -22,7 +23,7 @@ class InformationPage extends StatelessWidget {
),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(30)),
color: Theme.of(context).textTheme!.bodyLarge!.decorationColor!
color: Theme.of(context).extension<CakeMenuTheme>()!.backgroundColor
),
child: Column(
mainAxisSize: MainAxisSize.min,

View file

@ -6,6 +6,7 @@ import 'package:cake_wallet/view_model/ionia/ionia_gift_cards_list_view_model.da
import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:cake_wallet/palette.dart';
import 'package:cake_wallet/themes/extensions/menu_theme.dart';
class IoniaFilterModal extends StatelessWidget {
IoniaFilterModal({required this.ioniaGiftCardsListViewModel}){
@ -53,7 +54,7 @@ class IoniaFilterModal extends StatelessWidget {
prefixIcon: searchIcon,
hintText: S.of(context).search_category,
contentPadding: EdgeInsets.only(bottom: 5),
fillColor: Theme.of(context).primaryTextTheme!.bodySmall!.decorationColor!.withOpacity(0.5),
fillColor: Theme.of(context).extension<CakeMenuTheme>()!.dividerColor.withOpacity(0.5),
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(8),

View file

@ -5,6 +5,7 @@ import 'package:cake_wallet/src/widgets/setting_actions.dart';
import 'package:cake_wallet/typography.dart';
import 'package:flutter/material.dart';
import 'package:cake_wallet/router.dart' as Router;
import 'package:cake_wallet/themes/extensions/menu_theme.dart';
final _settingsNavigatorKey = GlobalKey<NavigatorState>();
@ -71,10 +72,7 @@ class _DesktopSettingsPageState extends State<DesktopSettingsPage> {
},
separatorBuilder: (_, index) => Container(
height: 1,
color: Theme.of(context)
.primaryTextTheme!
.bodySmall!
.decorationColor!,
color: Theme.of(context).extension<CakeMenuTheme>()!.dividerColor,
),
itemCount: itemCount,
),

View file

@ -2,6 +2,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/indicator_dot_theme.dart';
import 'package:cake_wallet/themes/extensions/menu_theme.dart';
import 'package:cake_wallet/themes/extensions/new_wallet_theme.dart';
import 'package:cake_wallet/themes/extensions/sync_indicator_theme.dart';
import 'package:cake_wallet/themes/light_theme.dart';
@ -56,6 +57,11 @@ class BrightTheme extends LightTheme {
BalancePageTheme get balancePageTheme =>
BalancePageTheme(textColor: Colors.white.withOpacity(0.5));
@override
CakeMenuTheme get menuTheme => super.menuTheme.copyWith(
headerSecondGradientColor: Palette.pinkFlamingo,
iconColor: PaletteDark.pigeonBlue);
@override
ThemeData get themeData => super.themeData.copyWith(
indicatorColor: Colors.white.withOpacity(0.5), // page indicator
@ -111,11 +117,7 @@ class BrightTheme extends LightTheme {
decorationColor:
Colors.white // background of tiles (account list)
),
// body2 -> bodyLarge
bodyLarge: TextStyle(
color: Palette.moderateLavender, // menu header
decorationColor: Colors.white, // menu background
)),
),
primaryTextTheme: TextTheme(
titleLarge: TextStyle(
color: Palette.darkBlueCraiola, // title color
@ -123,7 +125,6 @@ class BrightTheme extends LightTheme {
),
bodySmall: TextStyle(
color: PaletteDark.pigeonBlue, // secondary text
decorationColor: Palette.wildLavender // menu divider
),
labelSmall: TextStyle(
color: Palette.darkGray, // transaction/trade details titles
@ -201,13 +202,6 @@ class BrightTheme extends LightTheme {
),
labelSmall: TextStyle(
color: Palette.wildPeriwinkle, // checkbox bounds (filter widget)
decorationColor: Colors.white, // menu subname
),
// display1 -> headlineMedium
headlineMedium: TextStyle(
color: Palette.blueCraiola, // first gradient color (menu header)
decorationColor:
Palette.pinkFlamingo, // second gradient color(menu header)
),
));
}

View file

@ -5,6 +5,7 @@ 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/indicator_dot_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';
import 'package:cake_wallet/themes/extensions/pin_code_theme.dart';
import 'package:cake_wallet/themes/extensions/support_page_theme.dart';
@ -93,12 +94,21 @@ class DarkTheme extends ThemeBase {
indicatorColor: PaletteDark.cyanBlue,
activeIndicatorColor: Colors.white));
@override
CakeMenuTheme get menuTheme => CakeMenuTheme(
headerFirstGradientColor: PaletteDark.deepPurpleBlue,
headerSecondGradientColor: PaletteDark.deepPurpleBlue,
backgroundColor: PaletteDark.deepPurpleBlue,
subnameTextColor: PaletteDark.darkCyanBlue,
dividerColor: PaletteDark.darkOceanBlue,
iconColor: PaletteDark.pigeonBlue);
@override
ThemeData get themeData => super.themeData.copyWith(
indicatorColor: PaletteDark.cyanBlue, // page indicator
hoverColor: PaletteDark.cyanBlue, // amount hint text (receive page)
dividerColor: PaletteDark.dividerColor,
hintColor: PaletteDark.pigeonBlue, // menu
hintColor: PaletteDark.pigeonBlue,
disabledColor: PaletteDark.deepVioletBlue,
dialogTheme: super
.themeData
@ -148,11 +158,6 @@ class DarkTheme extends ThemeBase {
decorationColor: PaletteDark
.darkOceanBlue // background of tiles (account list)
),
// body2 -> bodyLarge
bodyLarge: TextStyle(
color: PaletteDark.deepPurpleBlue, // menu header
decorationColor: PaletteDark.deepPurpleBlue, // menu background
)
),
primaryTextTheme: TextTheme(
// title -> titleLarge
@ -162,7 +167,6 @@ class DarkTheme extends ThemeBase {
),
bodySmall: TextStyle(
color: PaletteDark.darkCyanBlue, // secondary text
decorationColor: PaletteDark.darkOceanBlue // menu divider
),
labelSmall: TextStyle(
color:
@ -243,15 +247,7 @@ class DarkTheme extends ThemeBase {
),
labelSmall: TextStyle(
color: PaletteDark.wildVioletBlue, // checkbox bounds (filter widget)
decorationColor: PaletteDark.darkCyanBlue, // menu subname
),
// display1 -> headlineMedium
headlineMedium: TextStyle(
color: PaletteDark
.deepPurpleBlue, // first gradient color (menu header)
decorationColor: PaletteDark
.deepPurpleBlue, // second gradient color(menu header)
),
),
);
}

View file

@ -0,0 +1,60 @@
import 'package:flutter/material.dart';
class CakeMenuTheme extends ThemeExtension<CakeMenuTheme> {
final Color headerFirstGradientColor;
final Color headerSecondGradientColor;
final Color subnameTextColor;
final Color dividerColor;
final Color backgroundColor;
final Color iconColor;
CakeMenuTheme(
{required this.headerFirstGradientColor,
required this.headerSecondGradientColor,
required this.backgroundColor,
required this.subnameTextColor,
required this.dividerColor,
required this.iconColor});
@override
CakeMenuTheme copyWith(
{Color? headerFirstGradientColor,
Color? headerSecondGradientColor,
Color? backgroundColor,
Color? subnameTextColor,
Color? dividerColor,
Color? iconColor}) =>
CakeMenuTheme(
headerFirstGradientColor:
headerFirstGradientColor ?? this.headerFirstGradientColor,
headerSecondGradientColor:
headerSecondGradientColor ?? this.headerSecondGradientColor,
backgroundColor: backgroundColor ?? this.backgroundColor,
subnameTextColor: subnameTextColor ?? this.subnameTextColor,
dividerColor: dividerColor ?? this.dividerColor,
iconColor: iconColor ?? this.iconColor);
@override
CakeMenuTheme lerp(ThemeExtension<CakeMenuTheme>? other, double t) {
if (other is! CakeMenuTheme) {
return this;
}
return CakeMenuTheme(
headerFirstGradientColor: Color.lerp(
headerFirstGradientColor, other.headerFirstGradientColor, t) ??
headerFirstGradientColor,
headerSecondGradientColor: Color.lerp(headerSecondGradientColor,
other.headerSecondGradientColor, t) ??
headerSecondGradientColor,
backgroundColor:
Color.lerp(backgroundColor, other.backgroundColor, t) ??
backgroundColor,
subnameTextColor:
Color.lerp(subnameTextColor, other.subnameTextColor, t) ??
subnameTextColor,
dividerColor:
Color.lerp(dividerColor, other.dividerColor, t) ?? dividerColor,
iconColor: Color.lerp(iconColor, other.iconColor, t) ?? iconColor);
}
}

View file

@ -5,6 +5,7 @@ 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/indicator_dot_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';
import 'package:cake_wallet/themes/extensions/pin_code_theme.dart';
import 'package:cake_wallet/themes/extensions/support_page_theme.dart';
@ -94,6 +95,15 @@ class LightTheme extends ThemeBase {
indicatorColor: PaletteDark.darkCyanBlue.withOpacity(0.67),
activeIndicatorColor: PaletteDark.darkNightBlue));
@override
CakeMenuTheme get menuTheme => CakeMenuTheme(
headerFirstGradientColor: Palette.blueCraiola,
headerSecondGradientColor: Palette.blueGreyCraiola,
backgroundColor: Colors.white,
subnameTextColor: Colors.white,
dividerColor: Palette.wildLavender,
iconColor: Palette.gray);
@override
ThemeData get themeData => super.themeData.copyWith(
indicatorColor:
@ -151,11 +161,6 @@ class LightTheme extends ThemeBase {
decorationColor:
Colors.white // background of tiles (account list)
),
// body2 -> bodyLarge
bodyLarge: TextStyle(
color: Palette.moderateLavender, // menu header
decorationColor: Colors.white, // menu background
)
),
primaryTextTheme: TextTheme(
// title -> titleLarge
@ -165,7 +170,6 @@ class LightTheme extends ThemeBase {
),
bodySmall: TextStyle(
color: PaletteDark.pigeonBlue, // secondary text
decorationColor: Palette.wildLavender // menu divider
),
labelSmall: TextStyle(
color: Palette.darkGray, // transaction/trade details titles
@ -242,13 +246,7 @@ class LightTheme extends ThemeBase {
),
labelSmall: TextStyle(
color: Palette.wildPeriwinkle, // checkbox bounds (filter widget)
decorationColor: Colors.white, // menu subname
),
// display1 -> headlineMedium
headlineMedium: TextStyle(
color: Palette.blueCraiola, // first gradient color (menu header)
decorationColor: Palette.blueGreyCraiola, // second gradient color(menu header)
),
),
);
}

View file

@ -4,6 +4,7 @@ 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/keyboard_theme.dart';
import 'package:cake_wallet/themes/extensions/menu_theme.dart';
import 'package:cake_wallet/themes/extensions/new_wallet_theme.dart';
import 'package:cake_wallet/themes/extensions/pin_code_theme.dart';
import 'package:cake_wallet/themes/extensions/support_page_theme.dart';
@ -64,6 +65,8 @@ abstract class ThemeBase {
AddressTheme get addressTheme;
CakeMenuTheme get menuTheme;
ThemeData get themeData => generatedThemeData.copyWith(
primaryColor: primaryColor,
cardColor: containerColor,
@ -79,6 +82,7 @@ abstract class ThemeBase {
newWalletTheme,
balancePageTheme,
addressTheme,
menuTheme,
],
scrollbarTheme: ScrollbarThemeData(
thumbColor: MaterialStateProperty.all(scrollbarTheme.thumbColor),