mirror of
https://github.com/cake-tech/cake_wallet.git
synced 2025-01-26 20:46:21 +00:00
refactor: create CakeMenuTheme
This commit is contained in:
parent
e67e07dd7b
commit
4e35ba2b5d
10 changed files with 108 additions and 72 deletions
|
@ -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: [
|
||||
|
|
|
@ -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),
|
||||
)))
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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),
|
||||
|
|
|
@ -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,
|
||||
),
|
||||
|
|
|
@ -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)
|
||||
),
|
||||
));
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
|
60
lib/themes/extensions/menu_theme.dart
Normal file
60
lib/themes/extensions/menu_theme.dart
Normal 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);
|
||||
}
|
||||
}
|
|
@ -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)
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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),
|
||||
|
|
Loading…
Reference in a new issue