dynamic themed icons

This commit is contained in:
julian 2022-09-23 08:33:44 -06:00
parent 28f84fe8ad
commit c3612d0d89
17 changed files with 88 additions and 62 deletions

View file

@ -51,7 +51,6 @@ import 'package:stackwallet/services/notifications_api.dart';
import 'package:stackwallet/services/notifications_service.dart'; import 'package:stackwallet/services/notifications_service.dart';
import 'package:stackwallet/services/trade_service.dart'; import 'package:stackwallet/services/trade_service.dart';
import 'package:stackwallet/services/wallets.dart'; import 'package:stackwallet/services/wallets.dart';
import 'package:stackwallet/utilities/assets.dart';
import 'package:stackwallet/utilities/constants.dart'; import 'package:stackwallet/utilities/constants.dart';
import 'package:stackwallet/utilities/db_version_migration.dart'; import 'package:stackwallet/utilities/db_version_migration.dart';
import 'package:stackwallet/utilities/enums/backup_frequency_type.dart'; import 'package:stackwallet/utilities/enums/backup_frequency_type.dart';
@ -145,17 +144,6 @@ void main() async {
monero.onStartup(); monero.onStartup();
await Hive.openBox<dynamic>(DB.boxNameTheme); await Hive.openBox<dynamic>(DB.boxNameTheme);
final colorScheme = DB.instance
.get<dynamic>(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, // SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,
// overlays: [SystemUiOverlay.bottom]); // overlays: [SystemUiOverlay.bottom]);
@ -360,6 +348,18 @@ class _MaterialAppWithThemeState extends ConsumerState<MaterialAppWithTheme>
@override @override
void initState() { void initState() {
final colorScheme = DB.instance
.get<dynamic>(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(); loadingCompleter = Completer();
WidgetsBinding.instance.addObserver(this); WidgetsBinding.instance.addObserver(this);
// load locale and prefs // load locale and prefs
@ -373,7 +373,7 @@ class _MaterialAppWithThemeState extends ConsumerState<MaterialAppWithTheme>
WidgetsBinding.instance.addPostFrameCallback((_) async { WidgetsBinding.instance.addPostFrameCallback((_) async {
ref.read(colorThemeProvider.state).state = ref.read(colorThemeProvider.state).state =
StackColors.fromStackColorTheme( StackColors.fromStackColorTheme(
Assets.theme! == ThemeType.dark ? DarkColors() : LightColors()); themeType == ThemeType.dark ? DarkColors() : LightColors());
if (Platform.isAndroid) { if (Platform.isAndroid) {
// fetch open file if it exists // fetch open file if it exists

View file

@ -107,7 +107,7 @@ class ContactPopUp extends ConsumerWidget {
child: contact.id == "default" child: contact.id == "default"
? Center( ? Center(
child: SvgPicture.asset( child: SvgPicture.asset(
Assets.svg.stackIcon, Assets.svg.stackIcon(context),
width: 20, width: 20,
), ),
) )

View file

@ -108,11 +108,11 @@ class _TradeDetailsViewState extends ConsumerState<TradeDetailsView> {
case ChangeNowTransactionStatus.Sending: case ChangeNowTransactionStatus.Sending:
case ChangeNowTransactionStatus.Refunded: case ChangeNowTransactionStatus.Refunded:
case ChangeNowTransactionStatus.Verifying: case ChangeNowTransactionStatus.Verifying:
return Assets.svg.txExchangePending; return Assets.svg.txExchangePending(context);
case ChangeNowTransactionStatus.Finished: case ChangeNowTransactionStatus.Finished:
return Assets.svg.txExchange; return Assets.svg.txExchange(context);
case ChangeNowTransactionStatus.Failed: case ChangeNowTransactionStatus.Failed:
return Assets.svg.txExchangeFailed; return Assets.svg.txExchangeFailed(context);
} }
} }

View file

@ -143,7 +143,7 @@ class _HomeViewState extends ConsumerState<HomeView> {
GestureDetector( GestureDetector(
onTap: _hiddenOptions, onTap: _hiddenOptions,
child: SvgPicture.asset( child: SvgPicture.asset(
Assets.svg.stackIcon, Assets.svg.stackIcon(context),
width: 24, width: 24,
height: 24, height: 24,
), ),
@ -174,7 +174,7 @@ class _HomeViewState extends ConsumerState<HomeView> {
icon: SvgPicture.asset( icon: SvgPicture.asset(
ref.watch(notificationsProvider ref.watch(notificationsProvider
.select((value) => value.hasUnreadNotifications)) .select((value) => value.hasUnreadNotifications))
? Assets.svg.bellNew ? Assets.svg.bellNew(context)
: Assets.svg.bell, : Assets.svg.bell,
width: 20, width: 20,
height: 20, height: 20,

View file

@ -110,7 +110,7 @@ class _IntroViewState extends State<IntroView> {
width: 130, width: 130,
height: 130, height: 130,
child: SvgPicture.asset( child: SvgPicture.asset(
Assets.svg.stackIcon, Assets.svg.stackIcon(context),
), ),
), ),
const Spacer( const Spacer(

View file

@ -9,7 +9,8 @@ class TxIcon extends StatelessWidget {
static const Size size = Size(32, 32); 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 (!isReceived && transaction.subType == "mint") {
if (isCancelled) { if (isCancelled) {
return Assets.svg.anonymizeFailed; return Assets.svg.anonymizeFailed;
@ -22,20 +23,20 @@ class TxIcon extends StatelessWidget {
if (isReceived) { if (isReceived) {
if (isCancelled) { if (isCancelled) {
return Assets.svg.receiveCancelled; return Assets.svg.receiveCancelled(context);
} }
if (isPending) { if (isPending) {
return Assets.svg.receivePending; return Assets.svg.receivePending(context);
} }
return Assets.svg.receive; return Assets.svg.receive(context);
} else { } else {
if (isCancelled) { if (isCancelled) {
return Assets.svg.sendCancelled; return Assets.svg.sendCancelled(context);
} }
if (isPending) { 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, transaction.isCancelled,
txIsReceived, txIsReceived,
!transaction.confirmedStatus, !transaction.confirmedStatus,
context,
), ),
width: size.width, width: size.width,
height: size.height, height: size.height,

View file

@ -178,7 +178,7 @@ class WalletNavigationBar extends StatelessWidget {
children: [ children: [
const Spacer(), const Spacer(),
SvgPicture.asset( SvgPicture.asset(
Assets.svg.exchange, Assets.svg.exchange(context),
width: 24, width: 24,
height: 24, height: 24,
), ),

View file

@ -436,7 +436,7 @@ class _WalletViewState extends ConsumerState<WalletView> {
icon: SvgPicture.asset( icon: SvgPicture.asset(
ref.watch(notificationsProvider.select((value) => ref.watch(notificationsProvider.select((value) =>
value.hasUnreadNotificationsFor(walletId))) value.hasUnreadNotificationsFor(walletId)))
? Assets.svg.bellNew ? Assets.svg.bellNew(context)
: Assets.svg.bell, : Assets.svg.bell,
width: 20, width: 20,
height: 20, height: 20,

View file

@ -54,7 +54,7 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
width: _width == expandedWidth ? 70 : 32, width: _width == expandedWidth ? 70 : 32,
height: _width == expandedWidth ? 70 : 32, height: _width == expandedWidth ? 70 : 32,
child: SvgPicture.asset( child: SvgPicture.asset(
Assets.svg.stackIcon, Assets.svg.stackIcon(context),
), ),
), ),
const SizedBox( const SizedBox(

View file

@ -40,7 +40,7 @@ class _MyStackViewState extends ConsumerState<MyStackView> {
width: 32, width: 32,
height: 32, height: 32,
child: SvgPicture.asset( child: SvgPicture.asset(
Assets.svg.stackIcon, Assets.svg.stackIcon(context),
), ),
), ),
const SizedBox( const SizedBox(

View file

@ -1,12 +1,12 @@
import 'package:flutter/material.dart';
import 'package:stackwallet/utilities/enums/coin_enum.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 { abstract class Assets {
static const svg = _SVG(); static const svg = _SVG();
static const png = _PNG(); static const png = _PNG();
static const lottie = _ANIMATIONS(); static const lottie = _ANIMATIONS();
static const socials = _SOCIALS(); static const socials = _SOCIALS();
static ThemeType? theme;
} }
class _SOCIALS { class _SOCIALS {
@ -21,11 +21,39 @@ class _SOCIALS {
class _SVG { class _SVG {
const _SVG(); const _SVG();
String bellNew(BuildContext context) =>
"assets/svg/${Theme.of(context).extension<StackColors>()!.themeType.name}/bell-new.svg";
String stackIcon(BuildContext context) =>
"assets/svg/${Theme.of(context).extension<StackColors>()!.themeType.name}/stack-icon1.svg";
String exchange(BuildContext context) =>
"assets/svg/${Theme.of(context).extension<StackColors>()!.themeType.name}/exchange-2.svg";
String buy(BuildContext context) =>
"assets/svg/${Theme.of(context).extension<StackColors>()!.themeType.name}/buy-coins-icon.svg";
String receive(BuildContext context) =>
"assets/svg/${Theme.of(context).extension<StackColors>()!.themeType.name}/tx-icon-receive.svg";
String receivePending(BuildContext context) =>
"assets/svg/${Theme.of(context).extension<StackColors>()!.themeType.name}/tx-icon-receive-pending.svg";
String receiveCancelled(BuildContext context) =>
"assets/svg/${Theme.of(context).extension<StackColors>()!.themeType.name}/tx-icon-receive-failed.svg";
String send(BuildContext context) =>
"assets/svg/${Theme.of(context).extension<StackColors>()!.themeType.name}/tx-icon-send.svg";
String sendPending(BuildContext context) =>
"assets/svg/${Theme.of(context).extension<StackColors>()!.themeType.name}/tx-icon-send-pending.svg";
String sendCancelled(BuildContext context) =>
"assets/svg/${Theme.of(context).extension<StackColors>()!.themeType.name}/tx-icon-send-failed.svg";
String txExchange(BuildContext context) =>
"assets/svg/${Theme.of(context).extension<StackColors>()!.themeType.name}/tx-exchange-icon.svg";
String txExchangePending(BuildContext context) =>
"assets/svg/${Theme.of(context).extension<StackColors>()!.themeType.name}/tx-exchange-icon-pending.svg";
String txExchangeFailed(BuildContext context) =>
"assets/svg/${Theme.of(context).extension<StackColors>()!.themeType.name}/tx-exchange-icon-failed.svg";
String get plus => "assets/svg/plus.svg"; String get plus => "assets/svg/plus.svg";
String get gear => "assets/svg/gear.svg"; String get gear => "assets/svg/gear.svg";
String get bell => "assets/svg/bell.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 arrowLeft => "assets/svg/arrow-left-fa.svg";
String get star => "assets/svg/star.svg"; String get star => "assets/svg/star.svg";
String get copy => "assets/svg/copy-fa.svg"; String get copy => "assets/svg/copy-fa.svg";
@ -37,8 +65,6 @@ class _SVG {
String get bars => "assets/svg/bars.svg"; String get bars => "assets/svg/bars.svg";
String get filter => "assets/svg/filter.svg"; String get filter => "assets/svg/filter.svg";
String get pending => "assets/svg/pending.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 radio => "assets/svg/signal-stream.svg";
String get arrowRotate => "assets/svg/arrow-rotate.svg"; String get arrowRotate => "assets/svg/arrow-rotate.svg";
String get arrowRotate2 => "assets/svg/arrow-rotate2.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 anonymizePending => "assets/svg/tx-icon-anonymize-pending.svg";
String get anonymizeFailed => "assets/svg/tx-icon-anonymize-failed.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 ellipse1 => "assets/svg/Ellipse-43.svg";
String get ellipse2 => "assets/svg/Ellipse-42.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 bitcoin => "assets/svg/coin_icons/Bitcoin.svg";
String get bitcoincash => "assets/svg/coin_icons/Bitcoincash.svg"; String get bitcoincash => "assets/svg/coin_icons/Bitcoincash.svg";
String get dogecoin => "assets/svg/coin_icons/Dogecoin.svg"; String get dogecoin => "assets/svg/coin_icons/Dogecoin.svg";

View file

@ -8,6 +8,8 @@ enum ThemeType {
} }
abstract class StackColorTheme { abstract class StackColorTheme {
ThemeType get themeType;
Color get background; Color get background;
Color get overlay; Color get overlay;

View file

@ -2,6 +2,9 @@ import 'package:flutter/material.dart';
import 'package:stackwallet/utilities/theme/color_theme.dart'; import 'package:stackwallet/utilities/theme/color_theme.dart';
class DarkColors extends StackColorTheme { class DarkColors extends StackColorTheme {
@override
ThemeType get themeType => ThemeType.dark;
@override @override
Color get background => const Color(0xFF2A2D34); Color get background => const Color(0xFF2A2D34);
@override @override

View file

@ -2,6 +2,9 @@ import 'package:flutter/material.dart';
import 'package:stackwallet/utilities/theme/color_theme.dart'; import 'package:stackwallet/utilities/theme/color_theme.dart';
class LightColors extends StackColorTheme { class LightColors extends StackColorTheme {
@override
ThemeType get themeType => ThemeType.light;
@override @override
Color get background => const Color(0xFFF7F7F7); Color get background => const Color(0xFFF7F7F7);
@override @override

View file

@ -4,6 +4,8 @@ import 'package:stackwallet/utilities/enums/coin_enum.dart';
import 'package:stackwallet/utilities/theme/color_theme.dart'; import 'package:stackwallet/utilities/theme/color_theme.dart';
class StackColors extends ThemeExtension<StackColors> { class StackColors extends ThemeExtension<StackColors> {
final ThemeType themeType;
final Color background; final Color background;
final Color overlay; final Color overlay;
@ -168,6 +170,7 @@ class StackColors extends ThemeExtension<StackColors> {
final Color myStackContactIconBG; final Color myStackContactIconBG;
StackColors({ StackColors({
required this.themeType,
required this.background, required this.background,
required this.overlay, required this.overlay,
required this.accentColorBlue, required this.accentColorBlue,
@ -299,6 +302,7 @@ class StackColors extends ThemeExtension<StackColors> {
factory StackColors.fromStackColorTheme(StackColorTheme colorTheme) { factory StackColors.fromStackColorTheme(StackColorTheme colorTheme) {
return StackColors( return StackColors(
themeType: colorTheme.themeType,
background: colorTheme.background, background: colorTheme.background,
overlay: colorTheme.overlay, overlay: colorTheme.overlay,
accentColorBlue: colorTheme.accentColorBlue, accentColorBlue: colorTheme.accentColorBlue,
@ -433,6 +437,7 @@ class StackColors extends ThemeExtension<StackColors> {
@override @override
ThemeExtension<StackColors> copyWith({ ThemeExtension<StackColors> copyWith({
ThemeType? themeType,
Color? background, Color? background,
Color? overlay, Color? overlay,
Color? accentColorBlue, Color? accentColorBlue,
@ -562,6 +567,7 @@ class StackColors extends ThemeExtension<StackColors> {
Color? myStackContactIconBG, Color? myStackContactIconBG,
}) { }) {
return StackColors( return StackColors(
themeType: themeType ?? this.themeType,
background: background ?? this.background, background: background ?? this.background,
overlay: overlay ?? this.overlay, overlay: overlay ?? this.overlay,
accentColorBlue: accentColorBlue ?? this.accentColorBlue, accentColorBlue: accentColorBlue ?? this.accentColorBlue,
@ -737,6 +743,7 @@ class StackColors extends ThemeExtension<StackColors> {
} }
return StackColors( return StackColors(
themeType: other.themeType,
background: Color.lerp( background: Color.lerp(
background, background,
other.background, other.background,

View file

@ -92,7 +92,7 @@ class _AddressBookCardState extends ConsumerState<AddressBookCard> {
child: contact.id == "default" child: contact.id == "default"
? Center( ? Center(
child: SvgPicture.asset( child: SvgPicture.asset(
Assets.svg.stackIcon, Assets.svg.stackIcon(context),
width: 20, width: 20,
), ),
) )

View file

@ -19,7 +19,7 @@ class TradeCard extends ConsumerWidget {
final ExchangeTransaction trade; final ExchangeTransaction trade;
final VoidCallback onTap; final VoidCallback onTap;
String _fetchIconAssetForStatus(String statusString) { String _fetchIconAssetForStatus(String statusString, BuildContext context) {
ChangeNowTransactionStatus? status; ChangeNowTransactionStatus? status;
try { try {
if (statusString.toLowerCase().startsWith("waiting")) { if (statusString.toLowerCase().startsWith("waiting")) {
@ -38,11 +38,11 @@ class TradeCard extends ConsumerWidget {
case ChangeNowTransactionStatus.Sending: case ChangeNowTransactionStatus.Sending:
case ChangeNowTransactionStatus.Refunded: case ChangeNowTransactionStatus.Refunded:
case ChangeNowTransactionStatus.Verifying: case ChangeNowTransactionStatus.Verifying:
return Assets.svg.txExchangePending; return Assets.svg.txExchangePending(context);
case ChangeNowTransactionStatus.Finished: case ChangeNowTransactionStatus.Finished:
return Assets.svg.txExchange; return Assets.svg.txExchange(context);
case ChangeNowTransactionStatus.Failed: case ChangeNowTransactionStatus.Failed:
return Assets.svg.txExchangeFailed; return Assets.svg.txExchangeFailed(context);
} }
} }
@ -62,7 +62,9 @@ class TradeCard extends ConsumerWidget {
child: Center( child: Center(
child: SvgPicture.asset( child: SvgPicture.asset(
_fetchIconAssetForStatus( _fetchIconAssetForStatus(
trade.statusObject?.status.name ?? trade.statusString), trade.statusObject?.status.name ?? trade.statusString,
context,
),
width: 32, width: 32,
height: 32, height: 32,
), ),