refactor: gradient background

This commit is contained in:
Rafael Saes 2023-07-03 09:26:43 -03:00
parent f9abd0b2c2
commit 3fb1a70cde
12 changed files with 112 additions and 64 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

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

View file

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

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

View file

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