mirror of
https://github.com/cake-tech/cake_wallet.git
synced 2025-01-26 20:46:21 +00:00
refactor: gradient background
This commit is contained in:
parent
f9abd0b2c2
commit
3fb1a70cde
12 changed files with 112 additions and 64 deletions
|
@ -4,6 +4,7 @@ import 'package:cake_wallet/di.dart';
|
|||
import 'package:cake_wallet/entities/main_actions.dart';
|
||||
import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_sidebar_wrapper.dart';
|
||||
import 'package:cake_wallet/src/screens/dashboard/widgets/market_place_page.dart';
|
||||
import 'package:cake_wallet/src/widgets/gradient_background.dart';
|
||||
import 'package:cake_wallet/utils/version_comparator.dart';
|
||||
import 'package:cake_wallet/view_model/dashboard/market_place_view_model.dart';
|
||||
import 'package:cake_wallet/generated/i18n.dart';
|
||||
|
@ -72,14 +73,8 @@ class _DashboardPageView extends BasePage {
|
|||
|
||||
@override
|
||||
Widget Function(BuildContext, Widget) get rootWrapper =>
|
||||
(BuildContext context, Widget scaffold) => Container(
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(colors: [
|
||||
Theme.of(context).colorScheme.secondary,
|
||||
Theme.of(context).scaffoldBackgroundColor,
|
||||
Theme.of(context).primaryColor,
|
||||
], begin: Alignment.topRight, end: Alignment.bottomLeft)),
|
||||
child: scaffold);
|
||||
(BuildContext context, Widget scaffold) =>
|
||||
GradientBackground(scaffold: scaffold);
|
||||
|
||||
@override
|
||||
bool get resizeToAvoidBottomInset => false;
|
||||
|
|
|
@ -4,6 +4,7 @@ import 'package:cake_wallet/entities/receive_page_option.dart';
|
|||
import 'package:cake_wallet/src/screens/base_page.dart';
|
||||
import 'package:cake_wallet/src/screens/dashboard/widgets/present_receive_option_picker.dart';
|
||||
import 'package:cake_wallet/src/widgets/alert_with_two_actions.dart';
|
||||
import 'package:cake_wallet/src/widgets/gradient_background.dart';
|
||||
import 'package:cake_wallet/src/widgets/keyboard_done_button.dart';
|
||||
import 'package:cake_wallet/themes/theme_base.dart';
|
||||
import 'package:cake_wallet/utils/responsive_layout_util.dart';
|
||||
|
@ -106,14 +107,8 @@ class AddressPage extends BasePage {
|
|||
|
||||
@override
|
||||
Widget Function(BuildContext, Widget) get rootWrapper =>
|
||||
(BuildContext context, Widget scaffold) => Container(
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(colors: [
|
||||
Theme.of(context).colorScheme.secondary,
|
||||
Theme.of(context).scaffoldBackgroundColor,
|
||||
Theme.of(context).primaryColor,
|
||||
], begin: Alignment.topRight, end: Alignment.bottomLeft)),
|
||||
child: scaffold);
|
||||
(BuildContext context, Widget scaffold) =>
|
||||
GradientBackground(scaffold: scaffold);
|
||||
|
||||
@override
|
||||
Widget? trailing(BuildContext context) {
|
||||
|
|
|
@ -2,6 +2,7 @@ import 'package:cake_wallet/ionia/ionia_create_state.dart';
|
|||
import 'package:cake_wallet/ionia/ionia_merchant.dart';
|
||||
import 'package:cake_wallet/routes.dart';
|
||||
import 'package:cake_wallet/src/screens/base_page.dart';
|
||||
import 'package:cake_wallet/src/widgets/gradient_background.dart';
|
||||
import 'package:cake_wallet/src/screens/ionia/widgets/card_item.dart';
|
||||
import 'package:cake_wallet/src/screens/ionia/widgets/card_menu.dart';
|
||||
import 'package:cake_wallet/src/screens/ionia/widgets/ionia_filter_modal.dart';
|
||||
|
@ -45,20 +46,9 @@ class IoniaManageCardsPage extends BasePage {
|
|||
Color get titleColor => currentTheme.type == ThemeType.bright ? Colors.white : Colors.black;
|
||||
|
||||
@override
|
||||
Widget Function(BuildContext, Widget) get rootWrapper => (BuildContext context, Widget scaffold) => Container(
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
colors: [
|
||||
Theme.of(context).colorScheme.secondary,
|
||||
Theme.of(context).scaffoldBackgroundColor,
|
||||
Theme.of(context).primaryColor,
|
||||
],
|
||||
begin: Alignment.topRight,
|
||||
end: Alignment.bottomLeft,
|
||||
),
|
||||
),
|
||||
child: scaffold,
|
||||
);
|
||||
Widget Function(BuildContext, Widget) get rootWrapper =>
|
||||
(BuildContext context, Widget scaffold) =>
|
||||
GradientBackground(scaffold: scaffold);
|
||||
|
||||
@override
|
||||
bool get resizeToAvoidBottomInset => false;
|
||||
|
|
|
@ -2,6 +2,7 @@ import 'package:cake_wallet/ionia/ionia_gift_card.dart';
|
|||
import 'package:cake_wallet/routes.dart';
|
||||
import 'package:cake_wallet/src/screens/base_page.dart';
|
||||
import 'package:cake_wallet/generated/i18n.dart';
|
||||
import 'package:cake_wallet/themes/extensions/dashboard_gradient_theme.dart';
|
||||
import 'package:cake_wallet/typography.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
|
@ -80,8 +81,8 @@ class _GradiantContainer extends StatelessWidget {
|
|||
borderRadius: BorderRadius.circular(15),
|
||||
gradient: LinearGradient(
|
||||
colors: [
|
||||
Theme.of(context).scaffoldBackgroundColor,
|
||||
Theme.of(context).colorScheme.secondary,
|
||||
Theme.of(context).extension<DashboardGradientTheme>()!.secondGradientColor,
|
||||
Theme.of(context).extension<DashboardGradientTheme>()!.firstGradientColor,
|
||||
],
|
||||
begin: Alignment.topRight,
|
||||
end: Alignment.bottomLeft,
|
||||
|
|
|
@ -5,6 +5,7 @@ import 'package:cake_wallet/entities/receive_page_option.dart';
|
|||
import 'package:cake_wallet/generated/i18n.dart';
|
||||
import 'package:cake_wallet/routes.dart';
|
||||
import 'package:cake_wallet/src/screens/base_page.dart';
|
||||
import 'package:cake_wallet/src/widgets/gradient_background.dart';
|
||||
import 'package:cake_wallet/src/screens/receive/widgets/anonpay_status_section.dart';
|
||||
import 'package:cake_wallet/src/screens/receive/widgets/qr_image.dart';
|
||||
import 'package:cake_wallet/src/screens/receive/widgets/copy_link_item.dart';
|
||||
|
@ -111,14 +112,8 @@ class AnonPayReceivePage extends BasePage {
|
|||
|
||||
@override
|
||||
Widget Function(BuildContext, Widget) get rootWrapper =>
|
||||
(BuildContext context, Widget scaffold) => Container(
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(colors: [
|
||||
Theme.of(context).colorScheme.secondary,
|
||||
Theme.of(context).scaffoldBackgroundColor,
|
||||
Theme.of(context).primaryColor,
|
||||
], begin: Alignment.topRight, end: Alignment.bottomLeft)),
|
||||
child: scaffold);
|
||||
(BuildContext context, Widget scaffold) =>
|
||||
GradientBackground(scaffold: scaffold);
|
||||
|
||||
@override
|
||||
Widget body(BuildContext context) {
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import 'package:cake_wallet/entities/qr_view_data.dart';
|
||||
import 'package:cake_wallet/src/widgets/gradient_background.dart';
|
||||
import 'package:cake_wallet/src/screens/receive/widgets/qr_image.dart';
|
||||
import 'package:cake_wallet/themes/theme_base.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
@ -47,19 +48,9 @@ class FullscreenQRPage extends BasePage {
|
|||
}
|
||||
|
||||
@override
|
||||
Widget Function(BuildContext, Widget) get rootWrapper => (BuildContext context, Widget scaffold) => Container(
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
colors: [
|
||||
Theme.of(context).colorScheme.secondary,
|
||||
Theme.of(context).scaffoldBackgroundColor,
|
||||
Theme.of(context).primaryColor,
|
||||
],
|
||||
begin: Alignment.topRight,
|
||||
end: Alignment.bottomLeft,
|
||||
),
|
||||
),
|
||||
child: scaffold);
|
||||
Widget Function(BuildContext, Widget) get rootWrapper =>
|
||||
(BuildContext context, Widget scaffold) =>
|
||||
GradientBackground(scaffold: scaffold);
|
||||
|
||||
@override
|
||||
Widget body(BuildContext context) {
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import 'package:cake_wallet/src/widgets/gradient_background.dart';
|
||||
import 'package:cake_wallet/src/widgets/keyboard_done_button.dart';
|
||||
import 'package:cake_wallet/src/widgets/section_divider.dart';
|
||||
import 'package:cake_wallet/themes/theme_base.dart';
|
||||
|
@ -73,14 +74,8 @@ class ReceivePage extends BasePage {
|
|||
|
||||
@override
|
||||
Widget Function(BuildContext, Widget) get rootWrapper =>
|
||||
(BuildContext context, Widget scaffold) => Container(
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(colors: [
|
||||
Theme.of(context).colorScheme.secondary,
|
||||
Theme.of(context).scaffoldBackgroundColor,
|
||||
Theme.of(context).primaryColor,
|
||||
], begin: Alignment.topRight, end: Alignment.bottomLeft)),
|
||||
child: scaffold);
|
||||
(BuildContext context, Widget scaffold) =>
|
||||
GradientBackground(scaffold: scaffold);
|
||||
|
||||
@override
|
||||
Widget trailing(BuildContext context) {
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import 'dart:convert';
|
||||
import 'package:cake_wallet/src/widgets/alert_background.dart';
|
||||
import 'package:cake_wallet/src/widgets/alert_close_button.dart';
|
||||
import 'package:cake_wallet/themes/extensions/dashboard_gradient_theme.dart';
|
||||
import 'package:cake_wallet/wallet_type_utils.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
|
@ -33,8 +34,8 @@ class ReleaseNotesScreen extends StatelessWidget {
|
|||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(30.0),
|
||||
gradient: LinearGradient(colors: [
|
||||
Theme.of(context).colorScheme.secondary,
|
||||
Theme.of(context).scaffoldBackgroundColor,
|
||||
Theme.of(context).extension<DashboardGradientTheme>()!.firstGradientColor,
|
||||
Theme.of(context).extension<DashboardGradientTheme>()!.secondGradientColor,
|
||||
], begin: Alignment.centerLeft, end: Alignment.centerRight)),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 24.0),
|
||||
|
|
30
lib/src/widgets/gradient_background.dart
Normal file
30
lib/src/widgets/gradient_background.dart
Normal file
|
@ -0,0 +1,30 @@
|
|||
import 'package:cake_wallet/themes/extensions/dashboard_gradient_theme.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class GradientBackground extends StatelessWidget {
|
||||
const GradientBackground({required this.scaffold});
|
||||
|
||||
final Widget scaffold;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
colors: [
|
||||
Theme.of(context)
|
||||
.extension<DashboardGradientTheme>()!
|
||||
.firstGradientColor,
|
||||
Theme.of(context)
|
||||
.extension<DashboardGradientTheme>()!
|
||||
.secondGradientColor,
|
||||
Theme.of(context)
|
||||
.extension<DashboardGradientTheme>()!
|
||||
.thirdGradientColor,
|
||||
],
|
||||
begin: Alignment.topRight,
|
||||
end: Alignment.bottomLeft,
|
||||
)),
|
||||
child: scaffold);
|
||||
}
|
||||
}
|
|
@ -1,3 +1,4 @@
|
|||
import 'package:cake_wallet/themes/extensions/dashboard_gradient_theme.dart';
|
||||
import 'package:cake_wallet/themes/light_theme.dart';
|
||||
import 'package:cake_wallet/themes/theme_base.dart';
|
||||
import 'package:cake_wallet/generated/i18n.dart';
|
||||
|
@ -18,6 +19,12 @@ class BrightTheme extends LightTheme {
|
|||
@override
|
||||
Color get containerColor => Palette.moderateLavender;
|
||||
|
||||
@override
|
||||
DashboardGradientTheme get pageGradientTheme => DashboardGradientTheme(
|
||||
firstGradientColor: Palette.blueCraiola,
|
||||
secondGradientColor: Palette.pinkFlamingo,
|
||||
thirdGradientColor: Palette.redHat);
|
||||
|
||||
@override
|
||||
ThemeData get themeData => super.themeData.copyWith(
|
||||
indicatorColor: Colors.white.withOpacity(0.5), // page indicator
|
||||
|
|
41
lib/themes/extensions/dashboard_gradient_theme.dart
Normal file
41
lib/themes/extensions/dashboard_gradient_theme.dart
Normal file
|
@ -0,0 +1,41 @@
|
|||
import 'package:flutter/material.dart';
|
||||
|
||||
class DashboardGradientTheme extends ThemeExtension<DashboardGradientTheme> {
|
||||
final Color firstGradientColor;
|
||||
final Color secondGradientColor;
|
||||
final Color thirdGradientColor;
|
||||
|
||||
DashboardGradientTheme(
|
||||
{required this.firstGradientColor,
|
||||
required this.secondGradientColor,
|
||||
required this.thirdGradientColor});
|
||||
|
||||
@override
|
||||
Object get type => DashboardGradientTheme;
|
||||
|
||||
@override
|
||||
DashboardGradientTheme copyWith(
|
||||
{Color? firstGradientColor,
|
||||
Color? secondGradientColor,
|
||||
Color? thirdGradientColor}) =>
|
||||
DashboardGradientTheme(
|
||||
firstGradientColor: firstGradientColor ?? this.firstGradientColor,
|
||||
secondGradientColor: secondGradientColor ?? this.secondGradientColor,
|
||||
thirdGradientColor: thirdGradientColor ?? this.thirdGradientColor);
|
||||
|
||||
@override
|
||||
DashboardGradientTheme lerp(ThemeExtension<DashboardGradientTheme>? other, double t) {
|
||||
if (other is! DashboardGradientTheme) {
|
||||
return this;
|
||||
}
|
||||
|
||||
return DashboardGradientTheme(
|
||||
firstGradientColor:
|
||||
Color.lerp(firstGradientColor, other.firstGradientColor, t)!,
|
||||
secondGradientColor:
|
||||
Color.lerp(secondGradientColor, other.secondGradientColor, t)!,
|
||||
thirdGradientColor:
|
||||
Color.lerp(thirdGradientColor, other.thirdGradientColor, t)!);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
import 'package:cake_wallet/themes/extensions/dashboard_gradient_theme.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
enum ThemeType { light, bright, dark }
|
||||
|
@ -25,10 +26,16 @@ abstract class ThemeBase {
|
|||
seedColor: primaryColor,
|
||||
background: backgroundColor);
|
||||
|
||||
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);
|
||||
cardColor: containerColor,
|
||||
extensions: [pageGradientTheme]);
|
||||
}
|
Loading…
Reference in a new issue