refactor: scrollbarTheme

This commit is contained in:
Rafael Saes 2023-07-03 09:43:33 -03:00
parent 8e7646f594
commit afe6a40960
10 changed files with 73 additions and 84 deletions

View file

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

View file

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

View file

@ -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(

View file

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

View file

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

View file

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

View file

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

View 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);
}
}

View file

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

View file

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