mirror of
https://github.com/cake-tech/cake_wallet.git
synced 2024-12-23 12:09:43 +00:00
refactor: scrollbarTheme
This commit is contained in:
parent
8e7646f594
commit
afe6a40960
10 changed files with 73 additions and 84 deletions
|
@ -1,3 +1,4 @@
|
|||
import 'package:cake_wallet/themes/extensions/cake_scrollbar_theme.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:cake_wallet/palette.dart';
|
||||
|
||||
|
@ -62,19 +63,13 @@ class PickerItemWidget extends StatelessWidget {
|
|||
style: TextStyle(
|
||||
fontSize: 7.0,
|
||||
fontFamily: 'Lato',
|
||||
color: Theme.of(context)
|
||||
.textTheme!
|
||||
.bodyMedium!
|
||||
.color!),
|
||||
color: Theme.of(context).extension<CakeScrollbarTheme>()!.thumbColor),
|
||||
),
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(6.0),
|
||||
//border: Border.all(color: ),
|
||||
color: Theme.of(context)
|
||||
.textTheme!
|
||||
.bodyMedium!
|
||||
.decorationColor!,
|
||||
color: Theme.of(context).extension<CakeScrollbarTheme>()!.trackColor,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
|
|
@ -6,6 +6,7 @@ import 'package:cake_wallet/src/screens/ionia/widgets/text_icon_button.dart';
|
|||
import 'package:cake_wallet/src/widgets/alert_background.dart';
|
||||
import 'package:cake_wallet/src/widgets/primary_button.dart';
|
||||
import 'package:cake_wallet/src/widgets/scollable_with_bottom_section.dart';
|
||||
import 'package:cake_wallet/themes/extensions/cake_scrollbar_theme.dart';
|
||||
import 'package:cake_wallet/typography.dart';
|
||||
import 'package:cake_wallet/utils/show_pop_up.dart';
|
||||
import 'package:cake_wallet/view_model/ionia/ionia_gift_cards_list_view_model.dart';
|
||||
|
@ -179,7 +180,7 @@ class IoniaDebitCardPage extends BasePage {
|
|||
S.of(context).how_to_use_card,
|
||||
style: textLargeSemiBold(
|
||||
color:
|
||||
Theme.of(context).textTheme!.bodyMedium!.color!,
|
||||
Theme.of(context).extension<CakeScrollbarTheme>()!.thumbColor,
|
||||
),
|
||||
),
|
||||
SizedBox(height: 24),
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import 'package:cake_wallet/src/widgets/alert_background.dart';
|
||||
import 'package:cake_wallet/src/widgets/primary_button.dart';
|
||||
import 'package:cake_wallet/themes/extensions/cake_scrollbar_theme.dart';
|
||||
import 'package:cake_wallet/typography.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
|
@ -41,7 +42,7 @@ class IoniaAlertModal extends StatelessWidget {
|
|||
Text(
|
||||
title,
|
||||
style: textLargeSemiBold(
|
||||
color: Theme.of(context).textTheme!.bodyMedium!.color!,
|
||||
color: Theme.of(context).extension<CakeScrollbarTheme>()!.thumbColor,
|
||||
),
|
||||
),
|
||||
Container(
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import 'package:cake_wallet/themes/extensions/cake_scrollbar_theme.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class CakeScrollbar extends StatelessWidget {
|
||||
|
@ -28,7 +29,7 @@ class CakeScrollbar extends StatelessWidget {
|
|||
width: width,
|
||||
decoration: BoxDecoration(
|
||||
color: backgroundColor ??
|
||||
Theme.of(context).textTheme!.bodyMedium!.decorationColor!,
|
||||
Theme.of(context).extension<CakeScrollbarTheme>()!.trackColor,
|
||||
borderRadius: BorderRadius.all(Radius.circular(3))),
|
||||
child: Stack(
|
||||
children: <Widget>[
|
||||
|
@ -40,7 +41,7 @@ class CakeScrollbar extends StatelessWidget {
|
|||
width: width,
|
||||
decoration: BoxDecoration(
|
||||
color: thumbColor ??
|
||||
Theme.of(context).textTheme!.bodyMedium!.color!,
|
||||
Theme.of(context).extension<CakeScrollbarTheme>()!.thumbColor,
|
||||
borderRadius: BorderRadius.all(Radius.circular(3))),
|
||||
),
|
||||
)
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
// ignore_for_file: deprecated_member_use
|
||||
|
||||
import 'package:cake_wallet/themes/extensions/cake_scrollbar_theme.dart';
|
||||
import 'package:cake_wallet/utils/responsive_layout_util.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:cw_core/currency.dart';
|
||||
|
@ -340,19 +341,13 @@ class _PickerState<Item> extends State<Picker<Item>> {
|
|||
style: TextStyle(
|
||||
fontSize: 7.0,
|
||||
fontFamily: 'Lato',
|
||||
color: Theme.of(context)
|
||||
.textTheme!
|
||||
.bodyMedium!
|
||||
.color!),
|
||||
color: Theme.of(context).extension<CakeScrollbarTheme>()!.thumbColor),
|
||||
),
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(6.0),
|
||||
//border: Border.all(color: ),
|
||||
color: Theme.of(context)
|
||||
.textTheme!
|
||||
.bodyMedium!
|
||||
.decorationColor!,
|
||||
color: Theme.of(context).extension<CakeScrollbarTheme>()!.trackColor,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
@ -427,19 +422,13 @@ class _PickerState<Item> extends State<Picker<Item>> {
|
|||
style: TextStyle(
|
||||
fontSize: 7.0,
|
||||
fontFamily: 'Lato',
|
||||
color: Theme.of(context)
|
||||
.textTheme!
|
||||
.bodyMedium!
|
||||
.color!),
|
||||
color: Theme.of(context).extension<CakeScrollbarTheme>()!.thumbColor),
|
||||
),
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(6.0),
|
||||
//border: Border.all(color: ),
|
||||
color: Theme.of(context)
|
||||
.textTheme!
|
||||
.bodyMedium!
|
||||
.decorationColor!,
|
||||
color: Theme.of(context).extension<CakeScrollbarTheme>()!.trackColor,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
|
|
@ -15,8 +15,6 @@ class BrightTheme extends LightTheme {
|
|||
@override
|
||||
Color get primaryColor => Palette.moderateSlateBlue;
|
||||
@override
|
||||
Color get primaryTextColor => Palette.darkBlueCraiola;
|
||||
@override
|
||||
Color get containerColor => Palette.moderateLavender;
|
||||
|
||||
@override
|
||||
|
@ -84,25 +82,12 @@ class BrightTheme extends LightTheme {
|
|||
decorationColor:
|
||||
Colors.white // background of tiles (account list)
|
||||
),
|
||||
// body -> bodyMedium
|
||||
bodyMedium: TextStyle(
|
||||
color: Palette.moderatePurpleBlue, // scrollbar thumb
|
||||
decorationColor: Palette.periwinkleCraiola // scrollbar background
|
||||
),
|
||||
// body2 -> bodyLarge
|
||||
bodyLarge: TextStyle(
|
||||
color: Palette.moderateLavender, // menu header
|
||||
decorationColor: Colors.white, // menu background
|
||||
)
|
||||
),
|
||||
scrollbarTheme: ScrollbarThemeData(
|
||||
thumbColor: MaterialStateProperty.all(Palette.moderatePurpleBlue),
|
||||
trackColor: MaterialStateProperty.all(Palette.periwinkleCraiola),
|
||||
radius: Radius.circular(3),
|
||||
thickness: MaterialStateProperty.all(6),
|
||||
thumbVisibility: MaterialStateProperty.all(true),
|
||||
crossAxisMargin: 6,
|
||||
),
|
||||
primaryTextTheme: TextTheme(
|
||||
titleLarge: TextStyle(
|
||||
color: Palette.darkBlueCraiola, // title color
|
||||
|
@ -205,8 +190,6 @@ class BrightTheme extends LightTheme {
|
|||
headlineSmall: TextStyle(
|
||||
color: Palette
|
||||
.moderateLavender, // first gradient color of wallet action buttons (wallet list page)
|
||||
backgroundColor: Palette
|
||||
.moderateLavender, // second gradient color of wallet action buttons (wallet list page)
|
||||
decorationColor: Colors
|
||||
.white // restore wallet button text color (wallet list page)
|
||||
),
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import 'package:cake_wallet/themes/extensions/cake_scrollbar_theme.dart';
|
||||
import 'package:cake_wallet/themes/theme_base.dart';
|
||||
import 'package:cake_wallet/generated/i18n.dart';
|
||||
import 'package:cake_wallet/palette.dart';
|
||||
|
@ -23,6 +24,10 @@ class DarkTheme extends ThemeBase {
|
|||
@override
|
||||
Color get dialogBackgroundColor => PaletteDark.darkNightBlue;
|
||||
|
||||
@override
|
||||
CakeScrollbarTheme get scrollbarTheme => CakeScrollbarTheme(
|
||||
thumbColor: PaletteDark.wildBlueGrey, trackColor: PaletteDark.violetBlue);
|
||||
|
||||
@override
|
||||
ThemeData get themeData => super.themeData.copyWith(
|
||||
indicatorColor: PaletteDark.cyanBlue, // page indicator
|
||||
|
@ -86,25 +91,12 @@ class DarkTheme extends ThemeBase {
|
|||
decorationColor: PaletteDark
|
||||
.darkOceanBlue // background of tiles (account list)
|
||||
),
|
||||
// body1 -> bodyMedium
|
||||
bodyMedium: TextStyle(
|
||||
color: PaletteDark.wildBlueGrey, // scrollbar thumb
|
||||
decorationColor: PaletteDark.violetBlue // scrollbar background
|
||||
),
|
||||
// body2 -> bodyLarge
|
||||
bodyLarge: TextStyle(
|
||||
color: PaletteDark.deepPurpleBlue, // menu header
|
||||
decorationColor: PaletteDark.deepPurpleBlue, // menu background
|
||||
)
|
||||
),
|
||||
scrollbarTheme: ScrollbarThemeData(
|
||||
thumbColor: MaterialStateProperty.all(PaletteDark.wildBlueGrey),
|
||||
trackColor: MaterialStateProperty.all(PaletteDark.violetBlue),
|
||||
radius: Radius.circular(3),
|
||||
thickness: MaterialStateProperty.all(6),
|
||||
thumbVisibility: MaterialStateProperty.all(true),
|
||||
crossAxisMargin: 6,
|
||||
),
|
||||
primaryTextTheme: TextTheme(
|
||||
// title -> titleLarge
|
||||
titleLarge: TextStyle(
|
||||
|
@ -200,7 +192,6 @@ class DarkTheme extends ThemeBase {
|
|||
),
|
||||
// subtitle -> titleSmall
|
||||
titleSmall: TextStyle(
|
||||
//color: PaletteDark.lightBlueGrey, // QR code (exchange trade page)
|
||||
color: Colors.white, // QR code (exchange trade page)
|
||||
backgroundColor:
|
||||
PaletteDark.deepVioletBlue, // divider (exchange trade page)
|
||||
|
@ -211,8 +202,6 @@ class DarkTheme extends ThemeBase {
|
|||
headlineSmall: TextStyle(
|
||||
color: PaletteDark
|
||||
.distantBlue, // first gradient color of wallet action buttons (wallet list page)
|
||||
backgroundColor: PaletteDark
|
||||
.distantNightBlue, // second gradient color of wallet action buttons (wallet list page)
|
||||
decorationColor: Palette
|
||||
.darkBlueCraiola // restore wallet button text color (wallet list page)
|
||||
),
|
||||
|
|
28
lib/themes/extensions/cake_scrollbar_theme.dart
Normal file
28
lib/themes/extensions/cake_scrollbar_theme.dart
Normal file
|
@ -0,0 +1,28 @@
|
|||
import 'package:flutter/material.dart';
|
||||
|
||||
class CakeScrollbarTheme extends ThemeExtension<CakeScrollbarTheme> {
|
||||
final Color thumbColor;
|
||||
final Color trackColor;
|
||||
|
||||
CakeScrollbarTheme({required this.thumbColor, required this.trackColor});
|
||||
|
||||
@override
|
||||
Object get type => CakeScrollbarTheme;
|
||||
|
||||
@override
|
||||
CakeScrollbarTheme copyWith({Color? thumbColor, Color? trackColor}) =>
|
||||
CakeScrollbarTheme(
|
||||
thumbColor: thumbColor ?? this.thumbColor,
|
||||
trackColor: trackColor ?? this.trackColor);
|
||||
|
||||
@override
|
||||
CakeScrollbarTheme lerp(ThemeExtension<CakeScrollbarTheme>? other, double t) {
|
||||
if (other is! CakeScrollbarTheme) {
|
||||
return this;
|
||||
}
|
||||
|
||||
return CakeScrollbarTheme(
|
||||
thumbColor: Color.lerp(thumbColor, other.thumbColor, t) ?? thumbColor,
|
||||
trackColor: Color.lerp(trackColor, other.trackColor, t) ?? trackColor);
|
||||
}
|
||||
}
|
|
@ -1,3 +1,4 @@
|
|||
import 'package:cake_wallet/themes/extensions/cake_scrollbar_theme.dart';
|
||||
import 'package:cake_wallet/themes/theme_base.dart';
|
||||
import 'package:cake_wallet/generated/i18n.dart';
|
||||
import 'package:cake_wallet/palette.dart';
|
||||
|
@ -23,6 +24,11 @@ class LightTheme extends ThemeBase {
|
|||
@override
|
||||
Color get dialogBackgroundColor => Colors.white;
|
||||
|
||||
@override
|
||||
CakeScrollbarTheme get scrollbarTheme => CakeScrollbarTheme(
|
||||
thumbColor: Palette.moderatePurpleBlue,
|
||||
trackColor: Palette.periwinkleCraiola);
|
||||
|
||||
@override
|
||||
ThemeData get themeData => super.themeData.copyWith(
|
||||
indicatorColor:
|
||||
|
@ -86,25 +92,12 @@ class LightTheme extends ThemeBase {
|
|||
decorationColor:
|
||||
Colors.white // background of tiles (account list)
|
||||
),
|
||||
// body -> bodyMedium
|
||||
bodyMedium: TextStyle(
|
||||
color: Palette.moderatePurpleBlue, // scrollbar thumb
|
||||
decorationColor: Palette.periwinkleCraiola // scrollbar background
|
||||
),
|
||||
// body2 -> bodyLarge
|
||||
bodyLarge: TextStyle(
|
||||
color: Palette.moderateLavender, // menu header
|
||||
decorationColor: Colors.white, // menu background
|
||||
)
|
||||
),
|
||||
scrollbarTheme: ScrollbarThemeData(
|
||||
thumbColor: MaterialStateProperty.all(Palette.moderatePurpleBlue),
|
||||
trackColor: MaterialStateProperty.all(Palette.periwinkleCraiola),
|
||||
radius: Radius.circular(3),
|
||||
thickness: MaterialStateProperty.all(6),
|
||||
thumbVisibility: MaterialStateProperty.all(true),
|
||||
crossAxisMargin: 6,
|
||||
),
|
||||
primaryTextTheme: TextTheme(
|
||||
// title -> titleLarge
|
||||
titleLarge: TextStyle(
|
||||
|
@ -208,8 +201,6 @@ class LightTheme extends ThemeBase {
|
|||
headlineSmall: TextStyle(
|
||||
color: Palette
|
||||
.moderateLavender, // first gradient color of wallet action buttons (wallet list page)
|
||||
backgroundColor: Palette
|
||||
.moderateLavender, // second gradient color of wallet action buttons (wallet list page)
|
||||
decorationColor: Colors
|
||||
.white // restore wallet button text color (wallet list page)
|
||||
),
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import 'package:cake_wallet/themes/extensions/cake_scrollbar_theme.dart';
|
||||
import 'package:cake_wallet/themes/extensions/dashboard_gradient_theme.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
|
@ -27,17 +28,27 @@ abstract class ThemeBase {
|
|||
seedColor: primaryColor,
|
||||
background: backgroundColor);
|
||||
|
||||
ThemeData get generatedThemeData => ThemeData.from(
|
||||
colorScheme: colorScheme,
|
||||
textTheme: TextTheme().apply(fontFamily: 'Lato'));
|
||||
|
||||
DashboardGradientTheme get pageGradientTheme => DashboardGradientTheme(
|
||||
firstGradientColor: backgroundColor,
|
||||
secondGradientColor: backgroundColor,
|
||||
thirdGradientColor: backgroundColor);
|
||||
|
||||
ThemeData get themeData => ThemeData.from(
|
||||
colorScheme: colorScheme,
|
||||
textTheme: TextTheme().apply(fontFamily: 'Lato'))
|
||||
.copyWith(
|
||||
primaryColor: primaryColor,
|
||||
cardColor: containerColor,
|
||||
dialogBackgroundColor: dialogBackgroundColor,
|
||||
extensions: [pageGradientTheme]);
|
||||
CakeScrollbarTheme get scrollbarTheme;
|
||||
|
||||
ThemeData get themeData => generatedThemeData.copyWith(
|
||||
primaryColor: primaryColor,
|
||||
cardColor: containerColor,
|
||||
dialogBackgroundColor: dialogBackgroundColor,
|
||||
extensions: [pageGradientTheme, scrollbarTheme],
|
||||
scrollbarTheme: ScrollbarThemeData(
|
||||
thumbColor: MaterialStateProperty.all(scrollbarTheme.thumbColor),
|
||||
trackColor: MaterialStateProperty.all(scrollbarTheme.trackColor),
|
||||
radius: Radius.circular(3),
|
||||
thickness: MaterialStateProperty.all(6),
|
||||
thumbVisibility: MaterialStateProperty.all(true),
|
||||
crossAxisMargin: 6));
|
||||
}
|
Loading…
Reference in a new issue