From c3612d0d89a65b39c3d8e351a393161c9ecae382 Mon Sep 17 00:00:00 2001 From: julian Date: Fri, 23 Sep 2022 08:33:44 -0600 Subject: [PATCH] dynamic themed icons --- lib/main.dart | 26 ++++----- .../subviews/contact_popup.dart | 2 +- .../exchange_view/trade_details_view.dart | 6 +- lib/pages/home_view/home_view.dart | 4 +- lib/pages/intro_view.dart | 2 +- .../wallet_view/sub_widgets/tx_icon.dart | 16 +++--- .../sub_widgets/wallet_navigation_bar.dart | 2 +- lib/pages/wallet_view/wallet_view.dart | 2 +- .../home/desktop_menu.dart | 2 +- .../home/my_stack_view/my_stack_view.dart | 2 +- lib/utilities/assets.dart | 57 +++++++++++-------- lib/utilities/theme/color_theme.dart | 2 + lib/utilities/theme/dark_colors.dart | 3 + lib/utilities/theme/light_colors.dart | 3 + lib/utilities/theme/stack_colors.dart | 7 +++ lib/widgets/address_book_card.dart | 2 +- lib/widgets/trade_card.dart | 12 ++-- 17 files changed, 88 insertions(+), 62 deletions(-) diff --git a/lib/main.dart b/lib/main.dart index 9075a5343..914fe59c2 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -51,7 +51,6 @@ import 'package:stackwallet/services/notifications_api.dart'; import 'package:stackwallet/services/notifications_service.dart'; import 'package:stackwallet/services/trade_service.dart'; import 'package:stackwallet/services/wallets.dart'; -import 'package:stackwallet/utilities/assets.dart'; import 'package:stackwallet/utilities/constants.dart'; import 'package:stackwallet/utilities/db_version_migration.dart'; import 'package:stackwallet/utilities/enums/backup_frequency_type.dart'; @@ -145,17 +144,6 @@ void main() async { monero.onStartup(); await Hive.openBox(DB.boxNameTheme); - final colorScheme = DB.instance - .get(boxName: DB.boxNameTheme, key: "colorScheme") as String?; - - switch (colorScheme) { - case "dark": - Assets.theme = ThemeType.dark; - break; - case "light": - default: - Assets.theme = ThemeType.light; - } // SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, // overlays: [SystemUiOverlay.bottom]); @@ -360,6 +348,18 @@ class _MaterialAppWithThemeState extends ConsumerState @override void initState() { + final colorScheme = DB.instance + .get(boxName: DB.boxNameTheme, key: "colorScheme") as String?; + + ThemeType themeType; + switch (colorScheme) { + case "dark": + themeType = ThemeType.dark; + break; + case "light": + default: + themeType = ThemeType.light; + } loadingCompleter = Completer(); WidgetsBinding.instance.addObserver(this); // load locale and prefs @@ -373,7 +373,7 @@ class _MaterialAppWithThemeState extends ConsumerState WidgetsBinding.instance.addPostFrameCallback((_) async { ref.read(colorThemeProvider.state).state = StackColors.fromStackColorTheme( - Assets.theme! == ThemeType.dark ? DarkColors() : LightColors()); + themeType == ThemeType.dark ? DarkColors() : LightColors()); if (Platform.isAndroid) { // fetch open file if it exists diff --git a/lib/pages/address_book_views/subviews/contact_popup.dart b/lib/pages/address_book_views/subviews/contact_popup.dart index 2cffe50e9..a14581c0a 100644 --- a/lib/pages/address_book_views/subviews/contact_popup.dart +++ b/lib/pages/address_book_views/subviews/contact_popup.dart @@ -107,7 +107,7 @@ class ContactPopUp extends ConsumerWidget { child: contact.id == "default" ? Center( child: SvgPicture.asset( - Assets.svg.stackIcon, + Assets.svg.stackIcon(context), width: 20, ), ) diff --git a/lib/pages/exchange_view/trade_details_view.dart b/lib/pages/exchange_view/trade_details_view.dart index 6405d6c43..439b0f659 100644 --- a/lib/pages/exchange_view/trade_details_view.dart +++ b/lib/pages/exchange_view/trade_details_view.dart @@ -108,11 +108,11 @@ class _TradeDetailsViewState extends ConsumerState { case ChangeNowTransactionStatus.Sending: case ChangeNowTransactionStatus.Refunded: case ChangeNowTransactionStatus.Verifying: - return Assets.svg.txExchangePending; + return Assets.svg.txExchangePending(context); case ChangeNowTransactionStatus.Finished: - return Assets.svg.txExchange; + return Assets.svg.txExchange(context); case ChangeNowTransactionStatus.Failed: - return Assets.svg.txExchangeFailed; + return Assets.svg.txExchangeFailed(context); } } diff --git a/lib/pages/home_view/home_view.dart b/lib/pages/home_view/home_view.dart index 07e2199af..b561207ab 100644 --- a/lib/pages/home_view/home_view.dart +++ b/lib/pages/home_view/home_view.dart @@ -143,7 +143,7 @@ class _HomeViewState extends ConsumerState { GestureDetector( onTap: _hiddenOptions, child: SvgPicture.asset( - Assets.svg.stackIcon, + Assets.svg.stackIcon(context), width: 24, height: 24, ), @@ -174,7 +174,7 @@ class _HomeViewState extends ConsumerState { icon: SvgPicture.asset( ref.watch(notificationsProvider .select((value) => value.hasUnreadNotifications)) - ? Assets.svg.bellNew + ? Assets.svg.bellNew(context) : Assets.svg.bell, width: 20, height: 20, diff --git a/lib/pages/intro_view.dart b/lib/pages/intro_view.dart index fa2ef0e64..ca8725886 100644 --- a/lib/pages/intro_view.dart +++ b/lib/pages/intro_view.dart @@ -110,7 +110,7 @@ class _IntroViewState extends State { width: 130, height: 130, child: SvgPicture.asset( - Assets.svg.stackIcon, + Assets.svg.stackIcon(context), ), ), const Spacer( diff --git a/lib/pages/wallet_view/sub_widgets/tx_icon.dart b/lib/pages/wallet_view/sub_widgets/tx_icon.dart index 45b4e610d..6222301a6 100644 --- a/lib/pages/wallet_view/sub_widgets/tx_icon.dart +++ b/lib/pages/wallet_view/sub_widgets/tx_icon.dart @@ -9,7 +9,8 @@ class TxIcon extends StatelessWidget { static const Size size = Size(32, 32); - String _getAssetName(bool isCancelled, bool isReceived, bool isPending) { + String _getAssetName( + bool isCancelled, bool isReceived, bool isPending, BuildContext context) { if (!isReceived && transaction.subType == "mint") { if (isCancelled) { return Assets.svg.anonymizeFailed; @@ -22,20 +23,20 @@ class TxIcon extends StatelessWidget { if (isReceived) { if (isCancelled) { - return Assets.svg.receiveCancelled; + return Assets.svg.receiveCancelled(context); } if (isPending) { - return Assets.svg.receivePending; + return Assets.svg.receivePending(context); } - return Assets.svg.receive; + return Assets.svg.receive(context); } else { if (isCancelled) { - return Assets.svg.sendCancelled; + return Assets.svg.sendCancelled(context); } if (isPending) { - return Assets.svg.sendPending; + return Assets.svg.sendPending(context); } - return Assets.svg.send; + return Assets.svg.send(context); } } @@ -52,6 +53,7 @@ class TxIcon extends StatelessWidget { transaction.isCancelled, txIsReceived, !transaction.confirmedStatus, + context, ), width: size.width, height: size.height, diff --git a/lib/pages/wallet_view/sub_widgets/wallet_navigation_bar.dart b/lib/pages/wallet_view/sub_widgets/wallet_navigation_bar.dart index 82375fc41..b82992673 100644 --- a/lib/pages/wallet_view/sub_widgets/wallet_navigation_bar.dart +++ b/lib/pages/wallet_view/sub_widgets/wallet_navigation_bar.dart @@ -178,7 +178,7 @@ class WalletNavigationBar extends StatelessWidget { children: [ const Spacer(), SvgPicture.asset( - Assets.svg.exchange, + Assets.svg.exchange(context), width: 24, height: 24, ), diff --git a/lib/pages/wallet_view/wallet_view.dart b/lib/pages/wallet_view/wallet_view.dart index b2069712d..95dfc4a98 100644 --- a/lib/pages/wallet_view/wallet_view.dart +++ b/lib/pages/wallet_view/wallet_view.dart @@ -436,7 +436,7 @@ class _WalletViewState extends ConsumerState { icon: SvgPicture.asset( ref.watch(notificationsProvider.select((value) => value.hasUnreadNotificationsFor(walletId))) - ? Assets.svg.bellNew + ? Assets.svg.bellNew(context) : Assets.svg.bell, width: 20, height: 20, diff --git a/lib/pages_desktop_specific/home/desktop_menu.dart b/lib/pages_desktop_specific/home/desktop_menu.dart index 81ba00a16..b71c20f6e 100644 --- a/lib/pages_desktop_specific/home/desktop_menu.dart +++ b/lib/pages_desktop_specific/home/desktop_menu.dart @@ -54,7 +54,7 @@ class _DesktopMenuState extends ConsumerState { width: _width == expandedWidth ? 70 : 32, height: _width == expandedWidth ? 70 : 32, child: SvgPicture.asset( - Assets.svg.stackIcon, + Assets.svg.stackIcon(context), ), ), const SizedBox( diff --git a/lib/pages_desktop_specific/home/my_stack_view/my_stack_view.dart b/lib/pages_desktop_specific/home/my_stack_view/my_stack_view.dart index 4853339d5..b7860542a 100644 --- a/lib/pages_desktop_specific/home/my_stack_view/my_stack_view.dart +++ b/lib/pages_desktop_specific/home/my_stack_view/my_stack_view.dart @@ -40,7 +40,7 @@ class _MyStackViewState extends ConsumerState { width: 32, height: 32, child: SvgPicture.asset( - Assets.svg.stackIcon, + Assets.svg.stackIcon(context), ), ), const SizedBox( diff --git a/lib/utilities/assets.dart b/lib/utilities/assets.dart index ba387fb9a..744268342 100644 --- a/lib/utilities/assets.dart +++ b/lib/utilities/assets.dart @@ -1,12 +1,12 @@ +import 'package:flutter/material.dart'; import 'package:stackwallet/utilities/enums/coin_enum.dart'; -import 'package:stackwallet/utilities/theme/color_theme.dart'; +import 'package:stackwallet/utilities/theme/stack_colors.dart'; abstract class Assets { static const svg = _SVG(); static const png = _PNG(); static const lottie = _ANIMATIONS(); static const socials = _SOCIALS(); - static ThemeType? theme; } class _SOCIALS { @@ -21,11 +21,39 @@ class _SOCIALS { class _SVG { const _SVG(); + String bellNew(BuildContext context) => + "assets/svg/${Theme.of(context).extension()!.themeType.name}/bell-new.svg"; + String stackIcon(BuildContext context) => + "assets/svg/${Theme.of(context).extension()!.themeType.name}/stack-icon1.svg"; + String exchange(BuildContext context) => + "assets/svg/${Theme.of(context).extension()!.themeType.name}/exchange-2.svg"; + String buy(BuildContext context) => + "assets/svg/${Theme.of(context).extension()!.themeType.name}/buy-coins-icon.svg"; + + String receive(BuildContext context) => + "assets/svg/${Theme.of(context).extension()!.themeType.name}/tx-icon-receive.svg"; + String receivePending(BuildContext context) => + "assets/svg/${Theme.of(context).extension()!.themeType.name}/tx-icon-receive-pending.svg"; + String receiveCancelled(BuildContext context) => + "assets/svg/${Theme.of(context).extension()!.themeType.name}/tx-icon-receive-failed.svg"; + + String send(BuildContext context) => + "assets/svg/${Theme.of(context).extension()!.themeType.name}/tx-icon-send.svg"; + String sendPending(BuildContext context) => + "assets/svg/${Theme.of(context).extension()!.themeType.name}/tx-icon-send-pending.svg"; + String sendCancelled(BuildContext context) => + "assets/svg/${Theme.of(context).extension()!.themeType.name}/tx-icon-send-failed.svg"; + + String txExchange(BuildContext context) => + "assets/svg/${Theme.of(context).extension()!.themeType.name}/tx-exchange-icon.svg"; + String txExchangePending(BuildContext context) => + "assets/svg/${Theme.of(context).extension()!.themeType.name}/tx-exchange-icon-pending.svg"; + String txExchangeFailed(BuildContext context) => + "assets/svg/${Theme.of(context).extension()!.themeType.name}/tx-exchange-icon-failed.svg"; + String get plus => "assets/svg/plus.svg"; String get gear => "assets/svg/gear.svg"; String get bell => "assets/svg/bell.svg"; - String get bellNew => "assets/svg/${Assets.theme!.name}/bell-new.svg"; - String get stackIcon => "assets/svg/${Assets.theme!.name}/stack-icon1.svg"; String get arrowLeft => "assets/svg/arrow-left-fa.svg"; String get star => "assets/svg/star.svg"; String get copy => "assets/svg/copy-fa.svg"; @@ -37,8 +65,6 @@ class _SVG { String get bars => "assets/svg/bars.svg"; String get filter => "assets/svg/filter.svg"; String get pending => "assets/svg/pending.svg"; - String get exchange => "assets/svg/${Assets.theme!.name}/exchange-2.svg"; - String get buy => "assets/svg/${Assets.theme!.name}/buy-coins-icon.svg"; String get radio => "assets/svg/signal-stream.svg"; String get arrowRotate => "assets/svg/arrow-rotate.svg"; String get arrowRotate2 => "assets/svg/arrow-rotate2.svg"; @@ -92,28 +118,9 @@ class _SVG { String get anonymizePending => "assets/svg/tx-icon-anonymize-pending.svg"; String get anonymizeFailed => "assets/svg/tx-icon-anonymize-failed.svg"; - String get receive => "assets/svg/${Assets.theme!.name}/tx-icon-receive.svg"; - String get receivePending => - "assets/svg/${Assets.theme!.name}/tx-icon-receive-pending.svg"; - String get receiveCancelled => - "assets/svg/${Assets.theme!.name}/tx-icon-receive-failed.svg"; - - String get send => "assets/svg/${Assets.theme!.name}/tx-icon-send.svg"; - String get sendPending => - "assets/svg/${Assets.theme!.name}/tx-icon-send-pending.svg"; - String get sendCancelled => - "assets/svg/${Assets.theme!.name}/tx-icon-send-failed.svg"; - String get ellipse1 => "assets/svg/Ellipse-43.svg"; String get ellipse2 => "assets/svg/Ellipse-42.svg"; - String get txExchange => - "assets/svg/${Assets.theme!.name}/tx-exchange-icon.svg"; - String get txExchangePending => - "assets/svg/${Assets.theme!.name}/tx-exchange-icon-pending.svg"; - String get txExchangeFailed => - "assets/svg/${Assets.theme!.name}/tx-exchange-icon-failed.svg"; - String get bitcoin => "assets/svg/coin_icons/Bitcoin.svg"; String get bitcoincash => "assets/svg/coin_icons/Bitcoincash.svg"; String get dogecoin => "assets/svg/coin_icons/Dogecoin.svg"; diff --git a/lib/utilities/theme/color_theme.dart b/lib/utilities/theme/color_theme.dart index dcabf544a..d64afb8c2 100644 --- a/lib/utilities/theme/color_theme.dart +++ b/lib/utilities/theme/color_theme.dart @@ -8,6 +8,8 @@ enum ThemeType { } abstract class StackColorTheme { + ThemeType get themeType; + Color get background; Color get overlay; diff --git a/lib/utilities/theme/dark_colors.dart b/lib/utilities/theme/dark_colors.dart index 7b8007e17..ee7551a27 100644 --- a/lib/utilities/theme/dark_colors.dart +++ b/lib/utilities/theme/dark_colors.dart @@ -2,6 +2,9 @@ import 'package:flutter/material.dart'; import 'package:stackwallet/utilities/theme/color_theme.dart'; class DarkColors extends StackColorTheme { + @override + ThemeType get themeType => ThemeType.dark; + @override Color get background => const Color(0xFF2A2D34); @override diff --git a/lib/utilities/theme/light_colors.dart b/lib/utilities/theme/light_colors.dart index 8e835164d..994a876d8 100644 --- a/lib/utilities/theme/light_colors.dart +++ b/lib/utilities/theme/light_colors.dart @@ -2,6 +2,9 @@ import 'package:flutter/material.dart'; import 'package:stackwallet/utilities/theme/color_theme.dart'; class LightColors extends StackColorTheme { + @override + ThemeType get themeType => ThemeType.light; + @override Color get background => const Color(0xFFF7F7F7); @override diff --git a/lib/utilities/theme/stack_colors.dart b/lib/utilities/theme/stack_colors.dart index 0e1579541..cd01ddf3b 100644 --- a/lib/utilities/theme/stack_colors.dart +++ b/lib/utilities/theme/stack_colors.dart @@ -4,6 +4,8 @@ import 'package:stackwallet/utilities/enums/coin_enum.dart'; import 'package:stackwallet/utilities/theme/color_theme.dart'; class StackColors extends ThemeExtension { + final ThemeType themeType; + final Color background; final Color overlay; @@ -168,6 +170,7 @@ class StackColors extends ThemeExtension { final Color myStackContactIconBG; StackColors({ + required this.themeType, required this.background, required this.overlay, required this.accentColorBlue, @@ -299,6 +302,7 @@ class StackColors extends ThemeExtension { factory StackColors.fromStackColorTheme(StackColorTheme colorTheme) { return StackColors( + themeType: colorTheme.themeType, background: colorTheme.background, overlay: colorTheme.overlay, accentColorBlue: colorTheme.accentColorBlue, @@ -433,6 +437,7 @@ class StackColors extends ThemeExtension { @override ThemeExtension copyWith({ + ThemeType? themeType, Color? background, Color? overlay, Color? accentColorBlue, @@ -562,6 +567,7 @@ class StackColors extends ThemeExtension { Color? myStackContactIconBG, }) { return StackColors( + themeType: themeType ?? this.themeType, background: background ?? this.background, overlay: overlay ?? this.overlay, accentColorBlue: accentColorBlue ?? this.accentColorBlue, @@ -737,6 +743,7 @@ class StackColors extends ThemeExtension { } return StackColors( + themeType: other.themeType, background: Color.lerp( background, other.background, diff --git a/lib/widgets/address_book_card.dart b/lib/widgets/address_book_card.dart index 5368310fa..7a2fca19f 100644 --- a/lib/widgets/address_book_card.dart +++ b/lib/widgets/address_book_card.dart @@ -92,7 +92,7 @@ class _AddressBookCardState extends ConsumerState { child: contact.id == "default" ? Center( child: SvgPicture.asset( - Assets.svg.stackIcon, + Assets.svg.stackIcon(context), width: 20, ), ) diff --git a/lib/widgets/trade_card.dart b/lib/widgets/trade_card.dart index 9038f6d21..ab58e2293 100644 --- a/lib/widgets/trade_card.dart +++ b/lib/widgets/trade_card.dart @@ -19,7 +19,7 @@ class TradeCard extends ConsumerWidget { final ExchangeTransaction trade; final VoidCallback onTap; - String _fetchIconAssetForStatus(String statusString) { + String _fetchIconAssetForStatus(String statusString, BuildContext context) { ChangeNowTransactionStatus? status; try { if (statusString.toLowerCase().startsWith("waiting")) { @@ -38,11 +38,11 @@ class TradeCard extends ConsumerWidget { case ChangeNowTransactionStatus.Sending: case ChangeNowTransactionStatus.Refunded: case ChangeNowTransactionStatus.Verifying: - return Assets.svg.txExchangePending; + return Assets.svg.txExchangePending(context); case ChangeNowTransactionStatus.Finished: - return Assets.svg.txExchange; + return Assets.svg.txExchange(context); case ChangeNowTransactionStatus.Failed: - return Assets.svg.txExchangeFailed; + return Assets.svg.txExchangeFailed(context); } } @@ -62,7 +62,9 @@ class TradeCard extends ConsumerWidget { child: Center( child: SvgPicture.asset( _fetchIconAssetForStatus( - trade.statusObject?.status.name ?? trade.statusString), + trade.statusObject?.status.name ?? trade.statusString, + context, + ), width: 32, height: 32, ),