From 0ddb3e9d3d39201c49b243c7c54c6ab5921a822a Mon Sep 17 00:00:00 2001 From: enriqueloz88 Date: Sat, 13 Jan 2024 18:43:07 +0100 Subject: [PATCH] feat(ux/ui): Change app colors --- lib/app/accounts/account_details.dart | 152 ++++++----- lib/app/accounts/account_type_selector.dart | 13 +- lib/app/accounts/all_accounts_balance.dart | 8 +- lib/app/budgets/budget_details_page.dart | 4 +- lib/app/budgets/budgets_page.dart | 8 +- .../components/budget_evolution_chart.dart | 14 +- lib/app/categories/categories_list.dart | 9 +- lib/app/home/dashboard.page.dart | 7 +- lib/app/home/widgets/home_drawer.dart | 3 +- .../home/widgets/income_or_expense_card.dart | 8 +- lib/app/onboarding/intro.page.dart | 6 +- lib/app/onboarding/onboarding.dart | 8 +- .../settings/appearance_settings_page.dart | 4 +- lib/app/settings/export_page.dart | 8 +- lib/app/settings/import_csv.dart | 4 +- lib/app/settings/purchases/donate_button.dart | 7 +- lib/app/settings/settings.page.dart | 16 +- .../footer_segmented_calendar_button.dart | 7 +- lib/app/stats/widgets/balance_bar_chart.dart | 13 +- .../widgets/balance_bar_chart_small.dart | 16 +- .../widgets/fund_evolution_line_chart.dart | 8 +- .../widgets/income_expense_comparason.dart | 5 +- .../form/transaction_form.page.dart | 15 +- .../transaction_details.page.dart | 237 +++++++++--------- lib/app/transactions/transactions.page.dart | 12 +- .../widgets/transaction_list.dart | 5 +- .../widgets/transaction_list_tile.dart | 6 +- lib/core/models/account/account.dart | 8 +- lib/core/models/transaction/transaction.dart | 15 +- lib/core/presentation/app_colors.dart | 137 ++++++++++ lib/core/presentation/theme.dart | 115 ++------- .../widgets/animated_progress_bar.dart | 4 +- .../widgets/card_with_header.dart | 31 ++- .../widgets/currency_selector_modal.dart | 2 +- .../widgets/icon_selector_modal.dart | 2 +- .../widgets/inline_info_card.dart | 4 +- .../filter_sheet_modal.dart | 9 +- .../transaction_status_filter_chip.dart | 5 +- .../presentation/widgets/trending_value.dart | 9 +- .../filters/custom_date_range_picker.dart | 3 +- .../services/filters/date_range_service.dart | 5 +- lib/core/utils/list_tile_action_item.dart | 7 +- 42 files changed, 533 insertions(+), 426 deletions(-) create mode 100644 lib/core/presentation/app_colors.dart diff --git a/lib/app/accounts/account_details.dart b/lib/app/accounts/account_details.dart index 7149013d..0d213276 100644 --- a/lib/app/accounts/account_details.dart +++ b/lib/app/accounts/account_details.dart @@ -22,6 +22,7 @@ import 'package:monekin/core/routes/app_router.dart'; import 'package:monekin/core/utils/list_tile_action_item.dart'; import 'package:monekin/i18n/translations.g.dart'; +import '../../core/presentation/app_colors.dart'; import '../transactions/form/transaction_form.page.dart'; @RoutePage() @@ -234,91 +235,88 @@ class _AccountDetailsPageState extends State { return Column( children: [ - Padding( - padding: const EdgeInsets.all(16), - child: Card( - margin: const EdgeInsets.all(0), - child: Padding( - padding: const EdgeInsets.all(16), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text(account.name), - StreamBuilder( - initialData: 0.0, - stream: AccountService.instance - .getAccountMoney(account: account), - builder: (context, snapshot) { - return Column( - crossAxisAlignment: - CrossAxisAlignment.start, - children: [ - CurrencyDisplayer( - amountToConvert: snapshot.data!, - currency: account.currency, - textStyle: const TextStyle( - fontSize: 32, - fontWeight: FontWeight.w600), + Card( + color: AppColors.of(context).light, + elevation: 0, + margin: const EdgeInsets.only( + left: 16, right: 16, bottom: 8, top: 16), + child: Padding( + padding: const EdgeInsets.all(16), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text(account.name), + StreamBuilder( + initialData: 0.0, + stream: AccountService.instance + .getAccountMoney(account: account), + builder: (context, snapshot) { + return Column( + crossAxisAlignment: + CrossAxisAlignment.start, + children: [ + CurrencyDisplayer( + amountToConvert: snapshot.data!, + currency: account.currency, + textStyle: const TextStyle( + fontSize: 32, + fontWeight: FontWeight.w600), + ), + StreamBuilder( + stream: ExchangeRateService.instance + .calculateExchangeRateToPreferredCurrency( + amount: snapshot.data!, + fromCurrency: account.currency.code, ), - StreamBuilder( - stream: ExchangeRateService.instance - .calculateExchangeRateToPreferredCurrency( - amount: snapshot.data!, - fromCurrency: - account.currency.code, - ), - builder: - (context, currencySnapshot) { - if (currencySnapshot - .connectionState == - ConnectionState.waiting || - currencySnapshot.data != 0 && - currencySnapshot.data! == - snapshot.data || - snapshot.data! == 0) { - return Container(); - } - - return Row( - children: [ - Text( - String.fromCharCode(Icons + builder: (context, currencySnapshot) { + if (currencySnapshot + .connectionState == + ConnectionState.waiting || + currencySnapshot.data != 0 && + currencySnapshot.data! == + snapshot.data || + snapshot.data! == 0) { + return Container(); + } + + return Row( + children: [ + Text( + String.fromCharCode(Icons + .currency_exchange_rounded + .codePoint), + style: TextStyle( + fontFamily: Icons .currency_exchange_rounded - .codePoint), - style: TextStyle( - fontFamily: Icons - .currency_exchange_rounded - .fontFamily, - ), + .fontFamily, ), - const SizedBox(width: 4), - CurrencyDisplayer( - amountToConvert: - currencySnapshot - .data!), - ], - ); - }, - ) - ], - ); - }), - ], - ), - Hero( - tag: 'account-icon-${widget.account.id}', - child: account.displayIcon(context, size: 48)), - ], - ), + ), + const SizedBox(width: 4), + CurrencyDisplayer( + amountToConvert: + currencySnapshot.data!), + ], + ); + }, + ) + ], + ); + }), + ], + ), + Hero( + tag: 'account-icon-${widget.account.id}', + child: account.displayIcon(context, size: 48)), + ], ), ), ), Expanded( child: SingleChildScrollView( - padding: const EdgeInsets.fromLTRB(16, 0, 16, 24), + padding: const EdgeInsets.fromLTRB(16, 8, 16, 24), child: Column( children: [ CardWithHeader( diff --git a/lib/app/accounts/account_type_selector.dart b/lib/app/accounts/account_type_selector.dart index abce2077..b1b88694 100644 --- a/lib/app/accounts/account_type_selector.dart +++ b/lib/app/accounts/account_type_selector.dart @@ -1,5 +1,7 @@ -import 'package:monekin/core/models/account/account.dart'; import 'package:flutter/material.dart'; +import 'package:monekin/core/models/account/account.dart'; + +import '../../core/presentation/app_colors.dart'; class AccountTypeSelector extends StatefulWidget { const AccountTypeSelector( @@ -75,9 +77,8 @@ class MonekinFilterChip extends StatelessWidget { borderRadius: BorderRadius.circular(16), side: BorderSide( width: 1.25, - color: isSelected - ? Theme.of(context).colorScheme.primary - : Colors.transparent, + color: + isSelected ? AppColors.of(context).primary : Colors.transparent, ), ), clipBehavior: Clip.hardEdge, @@ -92,7 +93,7 @@ class MonekinFilterChip extends StatelessWidget { accountType.icon, size: 28, color: isSelected - ? Theme.of(context).colorScheme.primary + ? AppColors.of(context).primary : Theme.of(context).colorScheme.onSurfaceVariant, ), const SizedBox(height: 18), @@ -100,7 +101,7 @@ class MonekinFilterChip extends StatelessWidget { accountType.title(context), style: Theme.of(context).textTheme.titleMedium?.copyWith( color: isSelected - ? Theme.of(context).colorScheme.primary + ? AppColors.of(context).primary : Theme.of(context).colorScheme.onSurfaceVariant), ), Text(accountType.description(context), diff --git a/lib/app/accounts/all_accounts_balance.dart b/lib/app/accounts/all_accounts_balance.dart index b4082e18..f2a75634 100644 --- a/lib/app/accounts/all_accounts_balance.dart +++ b/lib/app/accounts/all_accounts_balance.dart @@ -7,13 +7,14 @@ import 'package:flutter/material.dart'; import 'package:monekin/core/database/app_db.dart'; import 'package:monekin/core/database/services/account/account_service.dart'; import 'package:monekin/core/models/account/account.dart'; -import 'package:monekin/core/routes/app_router.dart'; import 'package:monekin/core/presentation/widgets/animated_progress_bar.dart'; import 'package:monekin/core/presentation/widgets/card_with_header.dart'; import 'package:monekin/core/presentation/widgets/transaction_filter/transaction_filters.dart'; +import 'package:monekin/core/routes/app_router.dart'; import 'package:monekin/i18n/translations.g.dart'; import '../../core/database/services/currency/currency_service.dart'; +import '../../core/presentation/app_colors.dart'; import '../../core/presentation/widgets/number_ui_formatters/currency_displayer.dart'; import '../../core/presentation/widgets/skeleton.dart'; @@ -133,13 +134,12 @@ class _AllAccountBalancePageState extends State { decoration: BoxDecoration( border: Border.all( width: 2, - color: - Theme.of(context).colorScheme.primary, + color: AppColors.of(context).primary, ), borderRadius: BorderRadius.circular(1000)), child: accountWithMoney.account.icon.display( size: 22, - color: Theme.of(context).colorScheme.primary, + color: AppColors.of(context).primary, )), onTap: () => context.pushRoute( AccountFormRoute( diff --git a/lib/app/budgets/budget_details_page.dart b/lib/app/budgets/budget_details_page.dart index a803fb35..29bb8302 100644 --- a/lib/app/budgets/budget_details_page.dart +++ b/lib/app/budgets/budget_details_page.dart @@ -9,7 +9,6 @@ import 'package:monekin/app/transactions/widgets/transaction_list.dart'; import 'package:monekin/core/database/services/budget/budget_service.dart'; import 'package:monekin/core/models/budget/budget.dart'; import 'package:monekin/core/models/transaction/transaction_status.dart'; -import 'package:monekin/core/presentation/theme.dart'; import 'package:monekin/core/presentation/widgets/animated_progress_bar.dart'; import 'package:monekin/core/presentation/widgets/card_with_header.dart'; import 'package:monekin/core/presentation/widgets/confirm_dialog.dart'; @@ -21,6 +20,7 @@ import 'package:monekin/core/routes/app_router.dart'; import 'package:monekin/core/utils/list_tile_action_item.dart'; import 'package:monekin/i18n/translations.g.dart'; +import '../../core/presentation/app_colors.dart'; import '../../core/presentation/widgets/empty_indicator.dart'; @RoutePage() @@ -201,7 +201,7 @@ class _BudgetDetailsPageState extends State { : budgetCurrentPercentage ?? 0, color: budgetCurrentPercentage != null && budgetCurrentPercentage! >= 1 - ? CustomColors.of(context).danger + ? AppColors.of(context).danger : null, ) ], diff --git a/lib/app/budgets/budgets_page.dart b/lib/app/budgets/budgets_page.dart index 87895ce4..3c4a5824 100644 --- a/lib/app/budgets/budgets_page.dart +++ b/lib/app/budgets/budgets_page.dart @@ -3,7 +3,6 @@ import 'package:flutter/material.dart'; import 'package:intl/intl.dart'; import 'package:monekin/core/database/services/budget/budget_service.dart'; import 'package:monekin/core/models/budget/budget.dart'; -import 'package:monekin/core/presentation/theme.dart'; import 'package:monekin/core/presentation/widgets/animated_progress_bar.dart'; import 'package:monekin/core/presentation/widgets/empty_indicator.dart'; import 'package:monekin/core/presentation/widgets/number_ui_formatters/currency_displayer.dart'; @@ -11,6 +10,8 @@ import 'package:monekin/core/presentation/widgets/skeleton.dart'; import 'package:monekin/core/routes/app_router.dart'; import 'package:monekin/i18n/translations.g.dart'; +import '../../core/presentation/app_colors.dart'; + @RoutePage() class BudgetsPage extends StatelessWidget { const BudgetsPage({super.key}); @@ -36,8 +37,7 @@ class BudgetsPage extends StatelessWidget { Chip( side: const BorderSide(width: 0, color: Colors.transparent), - backgroundColor: - Theme.of(context).colorScheme.primaryContainer, + backgroundColor: AppColors.of(context).primaryContainer, padding: const EdgeInsets.all(0), label: Text( budget.intervalPeriod?.allThePeriodsText(context) ?? @@ -79,7 +79,7 @@ class BudgetsPage extends StatelessWidget { ? 1 : budgetValue ?? 0, color: budgetValue != null && budgetValue >= 1 - ? CustomColors.of(context).danger + ? AppColors.of(context).danger : null, ); }) diff --git a/lib/app/budgets/components/budget_evolution_chart.dart b/lib/app/budgets/components/budget_evolution_chart.dart index f2abe077..18e2c004 100644 --- a/lib/app/budgets/components/budget_evolution_chart.dart +++ b/lib/app/budgets/components/budget_evolution_chart.dart @@ -1,13 +1,15 @@ import 'dart:math'; import 'package:collection/collection.dart'; +import 'package:fl_chart/fl_chart.dart'; +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; import 'package:monekin/app/stats/widgets/fund_evolution_line_chart.dart'; import 'package:monekin/core/models/budget/budget.dart'; import 'package:monekin/core/utils/color_utils.dart'; import 'package:monekin/i18n/translations.g.dart'; -import 'package:fl_chart/fl_chart.dart'; -import 'package:flutter/material.dart'; -import 'package:intl/intl.dart'; + +import '../../../core/presentation/app_colors.dart'; class BudgetEvolutionChart extends StatelessWidget { const BudgetEvolutionChart({super.key, required this.budget}); @@ -43,8 +45,8 @@ class BudgetEvolutionChart extends StatelessWidget { @override Widget build(BuildContext context) { List gradientColors = [ - Theme.of(context).colorScheme.primary, - Theme.of(context).colorScheme.primary.lighten(0.3), + AppColors.of(context).primary, + AppColors.of(context).primary.lighten(0.3), ]; final t = Translations.of(context); @@ -87,7 +89,7 @@ class BudgetEvolutionChart extends StatelessWidget { ]), lineTouchData: LineTouchData( touchTooltipData: LineTouchTooltipData( - tooltipBgColor: Theme.of(context).colorScheme.background, + tooltipBgColor: AppColors.of(context).background, tooltipHorizontalAlignment: FLHorizontalAlignment.right, tooltipMargin: -10, getTooltipItems: (touchedSpots) { diff --git a/lib/app/categories/categories_list.dart b/lib/app/categories/categories_list.dart index b9d9e60f..991c1865 100644 --- a/lib/app/categories/categories_list.dart +++ b/lib/app/categories/categories_list.dart @@ -3,7 +3,6 @@ import 'package:flutter/material.dart'; import 'package:monekin/app/categories/subcategory_selector.dart'; import 'package:monekin/core/database/services/category/category_service.dart'; import 'package:monekin/core/models/category/category.dart'; -import 'package:monekin/core/presentation/theme.dart'; import 'package:monekin/core/presentation/widgets/bottomSheetFooter.dart'; import 'package:monekin/core/presentation/widgets/persistent_footer_button.dart'; import 'package:monekin/core/presentation/widgets/scrollable_with_bottom_gradient.dart'; @@ -11,6 +10,8 @@ import 'package:monekin/core/routes/app_router.dart'; import 'package:monekin/core/utils/color_utils.dart'; import 'package:monekin/i18n/translations.g.dart'; +import '../../core/presentation/app_colors.dart'; + enum CategoriesListMode { page, modalSelectSubcategory, @@ -272,17 +273,17 @@ class _CategoriesListState extends State { labelColor: Theme.of(context).brightness == Brightness.light && widget.mode.isModal - ? appColorScheme(context).primary + ? AppColors.of(context).primary : null, unselectedLabelColor: Theme.of(context).brightness == Brightness.light && widget.mode.isModal - ? appColorScheme(context).onBackground.lighten(0.3) + ? AppColors.of(context).onBackground.lighten(0.3) : null, indicatorColor: Theme.of(context).brightness == Brightness.light && widget.mode.isModal - ? appColorScheme(context).primary + ? AppColors.of(context).primary : null, tabs: [ Tab(text: t.transaction.types.income(n: 10)), diff --git a/lib/app/home/dashboard.page.dart b/lib/app/home/dashboard.page.dart index dd29bbfb..8f21590f 100644 --- a/lib/app/home/dashboard.page.dart +++ b/lib/app/home/dashboard.page.dart @@ -14,7 +14,6 @@ import 'package:monekin/core/models/account/account.dart'; import 'package:monekin/core/models/transaction/transaction.dart'; import 'package:monekin/core/presentation/responsive/breakpoints.dart'; import 'package:monekin/core/presentation/responsive/responsive_row_column.dart'; -import 'package:monekin/core/presentation/theme.dart'; import 'package:monekin/core/presentation/widgets/card_with_header.dart'; import 'package:monekin/core/presentation/widgets/number_ui_formatters/currency_displayer.dart'; import 'package:monekin/core/presentation/widgets/skeleton.dart'; @@ -27,6 +26,8 @@ import 'package:monekin/core/services/finance_health_service.dart'; import 'package:monekin/core/utils/color_utils.dart'; import 'package:monekin/i18n/translations.g.dart'; +import '../../core/presentation/app_colors.dart'; + @RoutePage() class DashboardPage extends StatefulWidget { const DashboardPage({super.key}); @@ -68,11 +69,11 @@ class _DashboardPageState extends State { label: Text( dateRangeService.selectedDateRange.currentText(context)), backgroundColor: - appColorScheme(context).primaryContainer.darken(), + AppColors.of(context).primaryContainer.darken(), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(20.0), side: BorderSide( - color: appColorScheme(context).onPrimary, + color: AppColors.of(context).onPrimary, ), ), onPressed: () { diff --git a/lib/app/home/widgets/home_drawer.dart b/lib/app/home/widgets/home_drawer.dart index 31eb9165..5cb19237 100644 --- a/lib/app/home/widgets/home_drawer.dart +++ b/lib/app/home/widgets/home_drawer.dart @@ -7,6 +7,7 @@ import 'package:monekin/core/presentation/widgets/skeleton.dart'; import 'package:monekin/core/routes/destinations.dart'; import 'package:monekin/i18n/translations.g.dart'; +import '../../../core/presentation/app_colors.dart'; import '../../../core/presentation/widgets/user_avatar.dart'; class HomeDrawer extends StatelessWidget { @@ -70,7 +71,7 @@ class HomeDrawer extends StatelessWidget { return UserAccountsDrawerHeader( decoration: BoxDecoration( - color: Theme.of(context).colorScheme.background, + color: AppColors.of(context).background, ), accountName: UserGreting(userName: userName), currentAccountPicture: UserAvatar(avatar: userAvatar), diff --git a/lib/app/home/widgets/income_or_expense_card.dart b/lib/app/home/widgets/income_or_expense_card.dart index cdd4d8d3..79e18029 100644 --- a/lib/app/home/widgets/income_or_expense_card.dart +++ b/lib/app/home/widgets/income_or_expense_card.dart @@ -5,6 +5,8 @@ import 'package:monekin/core/presentation/widgets/number_ui_formatters/currency_ import 'package:monekin/core/presentation/widgets/skeleton.dart'; import 'package:monekin/core/presentation/widgets/transaction_filter/transaction_filters.dart'; +import '../../../core/presentation/app_colors.dart'; + class IncomeOrExpenseCard extends StatelessWidget { const IncomeOrExpenseCard( {super.key, @@ -28,12 +30,12 @@ class IncomeOrExpenseCard extends StatelessWidget { Container( padding: const EdgeInsets.all(6), decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(8), + color: type.color(context), + borderRadius: BorderRadius.circular(80), ), child: Icon( type.icon, - color: type.color(context), + color: AppColors.of(context).background, size: 22, ), ), diff --git a/lib/app/onboarding/intro.page.dart b/lib/app/onboarding/intro.page.dart index 5aeb759b..999e66c5 100644 --- a/lib/app/onboarding/intro.page.dart +++ b/lib/app/onboarding/intro.page.dart @@ -1,10 +1,12 @@ import 'package:auto_route/auto_route.dart'; import 'package:flutter/material.dart'; import 'package:monekin/core/presentation/responsive/breakpoint_container.dart'; -import 'package:monekin/core/routes/app_router.dart'; import 'package:monekin/core/presentation/widgets/html_text.dart'; +import 'package:monekin/core/routes/app_router.dart'; import 'package:monekin/i18n/translations.g.dart'; +import '../../core/presentation/app_colors.dart'; + @RoutePage() class IntroPage extends StatelessWidget { const IntroPage({super.key}); @@ -40,7 +42,7 @@ class IntroPage extends StatelessWidget { style: Theme.of(context) .textTheme .labelSmall! - .copyWith(color: Theme.of(context).colorScheme.primary), + .copyWith(color: AppColors.of(context).primary), ), ], ); diff --git a/lib/app/onboarding/onboarding.dart b/lib/app/onboarding/onboarding.dart index 7e2a7f77..f930e722 100644 --- a/lib/app/onboarding/onboarding.dart +++ b/lib/app/onboarding/onboarding.dart @@ -6,11 +6,13 @@ import 'package:introduction_screen/introduction_screen.dart'; import 'package:monekin/core/database/services/app-data/app_data_service.dart'; import 'package:monekin/core/database/services/currency/currency_service.dart'; import 'package:monekin/core/database/services/user-setting/user_setting_service.dart'; -import 'package:monekin/core/routes/app_router.dart'; import 'package:monekin/core/presentation/widgets/currency_selector_modal.dart'; import 'package:monekin/core/presentation/widgets/skeleton.dart'; +import 'package:monekin/core/routes/app_router.dart'; import 'package:monekin/i18n/translations.g.dart'; +import '../../core/presentation/app_colors.dart'; + @RoutePage() class OnboardingPage extends StatefulWidget { const OnboardingPage({super.key}); @@ -187,8 +189,8 @@ class _OnboardingPageState extends State { dotsDecorator: DotsDecorator( size: const Size.square(10.0), activeSize: const Size(20.0, 10.0), - activeColor: Theme.of(context).colorScheme.primary, - color: Theme.of(context).colorScheme.primary.withOpacity(0.3), + activeColor: AppColors.of(context).primary, + color: AppColors.of(context).primary.withOpacity(0.3), spacing: const EdgeInsets.symmetric(horizontal: 3.0), activeShape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(25.0)), diff --git a/lib/app/settings/appearance_settings_page.dart b/lib/app/settings/appearance_settings_page.dart index d24b2cc5..236e211b 100644 --- a/lib/app/settings/appearance_settings_page.dart +++ b/lib/app/settings/appearance_settings_page.dart @@ -7,6 +7,8 @@ import 'package:monekin/core/presentation/widgets/color_picker.dart'; import 'package:monekin/core/utils/color_utils.dart'; import 'package:monekin/i18n/translations.g.dart'; +import '../../core/presentation/app_colors.dart'; + @RoutePage() class AdvancedSettingsPage extends StatefulWidget { const AdvancedSettingsPage({super.key}); @@ -201,7 +203,7 @@ class _AdvancedSettingsPageState extends State { late final Color color; if (snapshot.data! == 'auto') { - color = Theme.of(context).colorScheme.primary; + color = AppColors.of(context).primary; } else { color = ColorHex.get(snapshot.data!); } diff --git a/lib/app/settings/export_page.dart b/lib/app/settings/export_page.dart index 14f1c128..fb33be7f 100644 --- a/lib/app/settings/export_page.dart +++ b/lib/app/settings/export_page.dart @@ -11,6 +11,7 @@ import 'package:monekin/core/presentation/widgets/transaction_filter/transaction import 'package:monekin/i18n/translations.g.dart'; import '../../core/database/backup/backup_database_service.dart'; +import '../../core/presentation/app_colors.dart'; enum _ExportFormats { csv, db } @@ -43,9 +44,8 @@ class _ExportDataPageState extends State { borderRadius: BorderRadius.circular(16), side: BorderSide( width: 1.25, - color: isSelected - ? Theme.of(context).colorScheme.primary - : Colors.transparent, + color: + isSelected ? AppColors.of(context).primary : Colors.transparent, ), ), clipBehavior: Clip.hardEdge, @@ -72,7 +72,7 @@ class _ExportDataPageState extends State { title, style: Theme.of(context).textTheme.titleMedium?.copyWith( color: isSelected - ? Theme.of(context).colorScheme.primary + ? AppColors.of(context).primary : Theme.of(context).colorScheme.onSurfaceVariant), ), Text( diff --git a/lib/app/settings/import_csv.dart b/lib/app/settings/import_csv.dart index a27d07d5..f40b07df 100644 --- a/lib/app/settings/import_csv.dart +++ b/lib/app/settings/import_csv.dart @@ -23,6 +23,8 @@ import 'package:monekin/core/utils/text_field_utils.dart'; import 'package:monekin/i18n/translations.g.dart'; import 'package:uuid/uuid.dart'; +import '../../core/presentation/app_colors.dart'; + @RoutePage() class ImportCSVPage extends StatefulWidget { const ImportCSVPage({super.key}); @@ -94,7 +96,7 @@ class _ImportCSVPageState extends State { final t = Translations.of(context); icon ??= SupportedIconService.instance.defaultSupportedIcon; - iconColor ??= Theme.of(context).colorScheme.primary; + iconColor ??= AppColors.of(context).primary; return TextFormField( controller: diff --git a/lib/app/settings/purchases/donate_button.dart b/lib/app/settings/purchases/donate_button.dart index e7ea1b31..37cf0cc5 100644 --- a/lib/app/settings/purchases/donate_button.dart +++ b/lib/app/settings/purchases/donate_button.dart @@ -3,10 +3,11 @@ import 'dart:async'; import 'package:flutter/material.dart'; import 'package:in_app_purchase/in_app_purchase.dart'; import 'package:monekin/app/settings/purchases/in_app_purchase.dart'; -import 'package:monekin/core/presentation/theme.dart'; import 'package:monekin/core/utils/color_utils.dart'; import 'package:monekin/i18n/translations.g.dart'; +import '../../../core/presentation/app_colors.dart'; + class DonateButton extends StatefulWidget { const DonateButton({ super.key, @@ -130,8 +131,8 @@ class _DonateButtonState extends State { clipBehavior: Clip.hardEdge, margin: const EdgeInsets.all(0), color: Theme.of(context).brightness == Brightness.light - ? CustomColors.of(context).danger.lighten(0.8) - : CustomColors.of(context).danger.withOpacity(0.2), + ? AppColors.of(context).danger.lighten(0.8) + : AppColors.of(context).danger.withOpacity(0.2), shape: RoundedRectangleBorder( side: BorderSide( color: Theme.of(context).colorScheme.tertiary, width: 2), diff --git a/lib/app/settings/settings.page.dart b/lib/app/settings/settings.page.dart index b515b179..3c047585 100644 --- a/lib/app/settings/settings.page.dart +++ b/lib/app/settings/settings.page.dart @@ -2,13 +2,14 @@ import 'package:auto_route/auto_route.dart'; import 'package:flutter/material.dart'; import 'package:monekin/app/settings/edit_profile_modal.dart'; import 'package:monekin/core/database/services/user-setting/user_setting_service.dart'; -import 'package:monekin/core/presentation/theme.dart'; import 'package:monekin/core/presentation/widgets/skeleton.dart'; import 'package:monekin/core/presentation/widgets/user_avatar.dart'; import 'package:monekin/core/routes/app_router.dart'; import 'package:monekin/core/utils/color_utils.dart'; import 'package:monekin/i18n/translations.g.dart'; +import '../../core/presentation/app_colors.dart'; + @RoutePage() class SettingsPage extends StatefulWidget { const SettingsPage({super.key}); @@ -22,8 +23,7 @@ Widget createListSeparator(BuildContext context, String title) { padding: const EdgeInsets.fromLTRB(16, 16, 16, 4), child: Text( title.toUpperCase(), - style: - TextStyle(fontSize: 14, color: Theme.of(context).colorScheme.primary), + style: TextStyle(fontSize: 14, color: AppColors.of(context).primary), ), ); } @@ -42,7 +42,7 @@ ListTile createSettingItem(BuildContext context, children: [ Icon( icon, - color: appColorScheme(context).primary, + color: AppColors.of(context).primary, ), ], ), @@ -144,11 +144,11 @@ class _SettingsPageState extends State { clipBehavior: Clip.hardEdge, margin: const EdgeInsets.all(0), color: Theme.of(context).brightness == Brightness.light - ? appColorScheme(context).primary.lighten(0.8) - : appColorScheme(context).primary.withOpacity(0.2), + ? AppColors.of(context).primary.lighten(0.8) + : AppColors.of(context).primary.withOpacity(0.2), shape: RoundedRectangleBorder( side: BorderSide( - color: appColorScheme(context).primary, width: 2), + color: AppColors.of(context).primary, width: 2), borderRadius: BorderRadius.circular(8)), child: Padding( padding: const EdgeInsets.symmetric( @@ -157,7 +157,7 @@ class _SettingsPageState extends State { children: [ Icon( Icons.favorite, - color: appColorScheme(context).primary, + color: AppColors.of(context).primary, ), const SizedBox(width: 12), Expanded( diff --git a/lib/app/stats/footer_segmented_calendar_button.dart b/lib/app/stats/footer_segmented_calendar_button.dart index 174df827..71bada5c 100644 --- a/lib/app/stats/footer_segmented_calendar_button.dart +++ b/lib/app/stats/footer_segmented_calendar_button.dart @@ -3,6 +3,8 @@ import 'package:flutter/services.dart'; import 'package:monekin/core/presentation/widgets/persistent_footer_button.dart'; import 'package:monekin/core/services/filters/date_range_service.dart'; +import '../../core/presentation/app_colors.dart'; + class FooterSegmentedCalendarButton extends StatefulWidget { const FooterSegmentedCalendarButton( {super.key, required this.onDateRangeChanged}); @@ -30,10 +32,11 @@ class _FooterSegmentedCalendarButtonState child: IconButton.outlined( onPressed: onPressed, icon: Icon(icon), - color: Theme.of(context).colorScheme.primary, + color: AppColors.of(context).primary, style: ButtonStyle( side: MaterialStateProperty.all( - BorderSide(color: Theme.of(context).colorScheme.primary)), + BorderSide(color: AppColors.of(context).primary), + ), shape: MaterialStateProperty.all( RoundedRectangleBorder( borderRadius: borderRadius, diff --git a/lib/app/stats/widgets/balance_bar_chart.dart b/lib/app/stats/widgets/balance_bar_chart.dart index ccf6a2d5..a2739700 100644 --- a/lib/app/stats/widgets/balance_bar_chart.dart +++ b/lib/app/stats/widgets/balance_bar_chart.dart @@ -6,12 +6,13 @@ import 'package:flutter/material.dart'; import 'package:intl/intl.dart'; import 'package:monekin/core/database/services/account/account_service.dart'; import 'package:monekin/core/models/transaction/transaction.dart'; -import 'package:monekin/core/presentation/theme.dart'; import 'package:monekin/core/presentation/widgets/number_ui_formatters/ui_number_formatter.dart'; import 'package:monekin/core/presentation/widgets/transaction_filter/transaction_filters.dart'; import 'package:monekin/core/services/filters/date_range_service.dart'; import 'package:monekin/core/utils/color_utils.dart'; +import '../../../core/presentation/app_colors.dart'; + class IncomeExpenseChartDataItem { List income; List expense; @@ -229,8 +230,8 @@ class _BalanceBarChartState extends State { BarChartRodData( toY: income, color: isTouched && touchedRodDataIndex == 0 - ? CustomColors.of(context).success.darken(0.1) - : CustomColors.of(context).success, + ? AppColors.of(context).success.darken(0.1) + : AppColors.of(context).success, width: width, borderRadius: BorderRadius.only( topLeft: radius, @@ -240,8 +241,8 @@ class _BalanceBarChartState extends State { BarChartRodData( toY: expense, color: isTouched && touchedRodDataIndex == 1 - ? CustomColors.of(context).danger.darken(0.1) - : CustomColors.of(context).danger, + ? AppColors.of(context).danger.darken(0.1) + : AppColors.of(context).danger, width: width, borderRadius: BorderRadius.only( bottomLeft: radius, @@ -292,7 +293,7 @@ class _BalanceBarChartState extends State { barTouchData: BarTouchData( touchTooltipData: BarTouchTooltipData( tooltipMargin: -10, - tooltipBgColor: Theme.of(context).colorScheme.background, + tooltipBgColor: AppColors.of(context).background, getTooltipItem: (group, groupIndex, rod, rodIndex) { return BarTooltipItem( '${snapshot.data!.longTitles[group.x]}\n', diff --git a/lib/app/stats/widgets/balance_bar_chart_small.dart b/lib/app/stats/widgets/balance_bar_chart_small.dart index 1ba44c17..f84ded6e 100644 --- a/lib/app/stats/widgets/balance_bar_chart_small.dart +++ b/lib/app/stats/widgets/balance_bar_chart_small.dart @@ -4,11 +4,12 @@ import 'package:flutter/material.dart'; import 'package:monekin/core/database/services/account/account_service.dart'; import 'package:monekin/core/models/transaction/transaction.dart'; import 'package:monekin/core/presentation/responsive/breakpoints.dart'; -import 'package:monekin/core/presentation/theme.dart'; import 'package:monekin/core/presentation/widgets/transaction_filter/transaction_filters.dart'; import 'package:monekin/core/services/filters/date_range_service.dart'; import 'package:monekin/i18n/translations.g.dart'; +import '../../../core/presentation/app_colors.dart'; + class BalanceChartSmall extends StatefulWidget { const BalanceChartSmall({super.key, required this.dateRangeService}); @@ -22,7 +23,7 @@ class _BalanceChartSmallState extends State { int touchedGroupIndex = -1; BarChartGroupData makeGroupData(int x, double expense, double income, - {bool disabled = false, required CustomColors colors}) { + {bool disabled = false, required AppColors colors}) { const double width = 56; const radius = BorderRadius.vertical( @@ -143,9 +144,9 @@ class _BalanceChartSmallState extends State { ), barGroups: [ makeGroupData(0, 4, 2, - disabled: true, colors: CustomColors.of(context)), + disabled: true, colors: AppColors.of(context)), makeGroupData(1, 5, 7, - disabled: true, colors: CustomColors.of(context)), + disabled: true, colors: AppColors.of(context)), ], gridData: const FlGridData(show: false), ), @@ -198,8 +199,7 @@ class _BalanceChartSmallState extends State { BarChartData( barTouchData: BarTouchData( touchTooltipData: BarTouchTooltipData( - tooltipBgColor: - Theme.of(context).colorScheme.background, + tooltipBgColor: AppColors.of(context).background, getTooltipItem: (a, b, c, d) => null, ), ), @@ -216,10 +216,10 @@ class _BalanceChartSmallState extends State { barGroups: [ makeGroupData( 0, -snapshpot.data![0], snapshpot.data![1], - colors: CustomColors.of(context)), + colors: AppColors.of(context)), makeGroupData( 1, -snapshpot.data![2], snapshpot.data![3], - colors: CustomColors.of(context)), + colors: AppColors.of(context)), ], gridData: const FlGridData(show: false), ), diff --git a/lib/app/stats/widgets/fund_evolution_line_chart.dart b/lib/app/stats/widgets/fund_evolution_line_chart.dart index 88ef5fcb..40fe9b6c 100644 --- a/lib/app/stats/widgets/fund_evolution_line_chart.dart +++ b/lib/app/stats/widgets/fund_evolution_line_chart.dart @@ -12,6 +12,7 @@ import 'package:monekin/core/utils/color_utils.dart'; import 'package:monekin/i18n/translations.g.dart'; import 'package:rxdart/rxdart.dart'; +import '../../../core/presentation/app_colors.dart'; import '../../../core/services/filters/date_range_service.dart'; class LineChartDataItem { @@ -65,8 +66,8 @@ class FundEvolutionLineChart extends StatelessWidget { @override Widget build(BuildContext context) { List gradientColors = [ - Theme.of(context).colorScheme.primary, - Theme.of(context).colorScheme.primary.lighten(0.3), + AppColors.of(context).primary, + AppColors.of(context).primary.lighten(0.3), ]; final accountService = AccountService.instance; @@ -214,8 +215,7 @@ class FundEvolutionLineChart extends StatelessWidget { enabled: snapshot.hasData, touchTooltipData: LineTouchTooltipData( tooltipMargin: -10, - tooltipBgColor: - Theme.of(context).colorScheme.background, + tooltipBgColor: AppColors.of(context).background, getTooltipItems: (touchedSpots) { return touchedSpots.map((barSpot) { final flSpot = barSpot; diff --git a/lib/app/stats/widgets/income_expense_comparason.dart b/lib/app/stats/widgets/income_expense_comparason.dart index c381f588..bd98a783 100644 --- a/lib/app/stats/widgets/income_expense_comparason.dart +++ b/lib/app/stats/widgets/income_expense_comparason.dart @@ -1,7 +1,6 @@ import 'package:flutter/material.dart'; import 'package:monekin/core/database/services/account/account_service.dart'; import 'package:monekin/core/models/transaction/transaction.dart'; -import 'package:monekin/core/presentation/theme.dart'; import 'package:monekin/core/presentation/widgets/animated_progress_bar.dart'; import 'package:monekin/core/presentation/widgets/number_ui_formatters/currency_displayer.dart'; import 'package:monekin/core/presentation/widgets/skeleton.dart'; @@ -9,6 +8,8 @@ import 'package:monekin/core/presentation/widgets/transaction_filter/transaction import 'package:monekin/i18n/translations.g.dart'; import 'package:rxdart/rxdart.dart'; +import '../../../core/presentation/app_colors.dart'; + class IncomeExpenseComparason extends StatelessWidget { const IncomeExpenseComparason( {super.key, @@ -119,7 +120,7 @@ class IncomeExpenseTile extends StatelessWidget { leading: Container( padding: const EdgeInsets.all(4), decoration: BoxDecoration( - color: appColorScheme(context).surfaceVariant, + color: AppColors.of(context).light, borderRadius: BorderRadius.circular(4), ), child: Icon( diff --git a/lib/app/transactions/form/transaction_form.page.dart b/lib/app/transactions/form/transaction_form.page.dart index 6933f375..22991be5 100644 --- a/lib/app/transactions/form/transaction_form.page.dart +++ b/lib/app/transactions/form/transaction_form.page.dart @@ -18,7 +18,6 @@ import 'package:monekin/core/models/transaction/recurrency_data.dart'; import 'package:monekin/core/models/transaction/transaction.dart'; import 'package:monekin/core/models/transaction/transaction_status.dart'; import 'package:monekin/core/presentation/animations/shake/shake_widget.dart'; -import 'package:monekin/core/presentation/theme.dart'; import 'package:monekin/core/presentation/widgets/bottomSheetFooter.dart'; import 'package:monekin/core/presentation/widgets/date_form_field/date_form_field.dart'; import 'package:monekin/core/presentation/widgets/expansion_panel/single_expansion_panel.dart'; @@ -36,6 +35,8 @@ import 'package:monekin/core/utils/text_field_utils.dart'; import 'package:monekin/i18n/translations.g.dart'; import 'package:uuid/uuid.dart'; +import '../../../core/presentation/app_colors.dart'; + enum TransactionFormMode { transfer, incomeOrExpense } @RoutePage() @@ -100,8 +101,8 @@ class _TransactionFormPageState extends State { }) { icon ??= SupportedIconService.instance.defaultSupportedIcon; iconColor ??= Theme.of(context).brightness == Brightness.light - ? Theme.of(context).colorScheme.primary - : Theme.of(context).colorScheme.primaryContainer; + ? AppColors.of(context).primary + : AppColors.of(context).primaryContainer; final t = Translations.of(context); @@ -467,7 +468,7 @@ class _TransactionFormPageState extends State { Color? textColor, }) { textColor ??= Theme.of(context).colorScheme.onBackground; - bgColor ??= Theme.of(context).colorScheme.background; + bgColor ??= AppColors.of(context).background; onButtonPress() { HapticFeedback.lightImpact(); @@ -554,9 +555,9 @@ class _TransactionFormPageState extends State { selectedCategory == null); final trColor = isBlue - ? CustomColors.of(context).brand.lighten() + ? AppColors.of(context).brand.lighten() : (currentTransactionTypeToAdd?.color(context) ?? - appColorScheme(context).primary); + AppColors.of(context).primary); final trColorLighten = Theme.of(context).brightness == Brightness.light ? isBlue @@ -992,7 +993,7 @@ class _TransactionFormPageState extends State { borderRadius: BorderRadius.circular(10), ), elevation: 0, - // color: Theme.of(context).colorScheme.primary, + // color: AppColors.of(context).primary, clipBehavior: Clip.hardEdge, child: LayoutBuilder(builder: (context, constraints) { return Row( diff --git a/lib/app/transactions/transaction_details.page.dart b/lib/app/transactions/transaction_details.page.dart index aecc51bc..dd6fd42f 100644 --- a/lib/app/transactions/transaction_details.page.dart +++ b/lib/app/transactions/transaction_details.page.dart @@ -8,7 +8,6 @@ import 'package:monekin/core/database/services/exchange-rate/exchange_rate_servi import 'package:monekin/core/database/services/transaction/transaction_service.dart'; import 'package:monekin/core/models/transaction/transaction.dart'; import 'package:monekin/core/models/transaction/transaction_status.dart'; -import 'package:monekin/core/presentation/theme.dart'; import 'package:monekin/core/presentation/widgets/card_with_header.dart'; import 'package:monekin/core/presentation/widgets/confirm_dialog.dart'; import 'package:monekin/core/presentation/widgets/monekin_quick_actions_buttons.dart'; @@ -21,6 +20,8 @@ import 'package:monekin/i18n/translations.g.dart'; import 'package:slang/builder/utils/string_extensions.dart'; import 'package:uuid/uuid.dart'; +import '../../core/presentation/app_colors.dart'; + class TransactionDetailAction { final String label; final IconData icon; @@ -237,7 +238,7 @@ class _TransactionDetailsPageState extends State { subtitleTextStyle: Theme.of(context).textTheme.labelSmall!.copyWith( color: isNext ? transaction.nextPayStatus!.color(context) - : appColorScheme(context).onSecondary, + : AppColors.of(context).dark, ), leading: Icon( isNext ? transaction.nextPayStatus!.icon : Icons.access_time, @@ -245,7 +246,7 @@ class _TransactionDetailsPageState extends State { ), title: Text( DateFormat.yMMMd().format(date), - style: TextStyle(color: appColorScheme(context).onSecondary), + style: TextStyle(color: AppColors.of(context).dark), ), subtitle: !isNext ? null @@ -255,8 +256,8 @@ class _TransactionDetailsPageState extends State { ), trailing: Row(mainAxisSize: MainAxisSize.min, children: [ IconButton( - color: CustomColors.of(context).danger, - disabledColor: CustomColors.of(context).danger.withOpacity(0.3), + color: AppColors.of(context).danger, + disabledColor: AppColors.of(context).danger.withOpacity(0.3), icon: const Icon(Icons.cancel_rounded), tooltip: t.transaction.next_payments.skip, onPressed: !isNext @@ -266,10 +267,10 @@ class _TransactionDetailsPageState extends State { const SizedBox(width: 4), IconButton( onPressed: !isNext ? null : () => showPayModal(context, transaction), - color: appColorScheme(context).primaryContainer, + color: AppColors.of(context).primaryContainer, tooltip: t.transaction.next_payments.accept, disabledColor: - appColorScheme(context).primaryContainer.withOpacity(0.3), + AppColors.of(context).primaryContainer.withOpacity(0.3), icon: const Icon(Icons.price_check_rounded), ), ]), @@ -341,7 +342,7 @@ class _TransactionDetailsPageState extends State { final color = showRecurrencyStatus ? isDarkTheme ? Theme.of(context).colorScheme.secondary.darken(0.15) - : Theme.of(context).colorScheme.primary.lighten(0.2) + : AppColors.of(context).primary.lighten(0.2) : transaction.status!.color; return Card( @@ -367,9 +368,8 @@ class _TransactionDetailsPageState extends State { style: TextStyle( fontSize: 16, fontWeight: FontWeight.w700, - color: isDarkTheme - ? Theme.of(context).colorScheme.background - : null, + color: + isDarkTheme ? AppColors.of(context).background : null, )), Icon( showRecurrencyStatus @@ -393,9 +393,8 @@ class _TransactionDetailsPageState extends State { ? t.recurrent_transactions.details.descr : transaction.status!.description(context), style: TextStyle( - color: isDarkTheme - ? Theme.of(context).colorScheme.background - : null, + color: + isDarkTheme ? AppColors.of(context).background : null, ), ), ), @@ -472,119 +471,116 @@ class _TransactionDetailsPageState extends State { style: TextStyle( color: Theme.of(context).colorScheme.onPrimary, ), - child: Padding( - padding: const EdgeInsets.all(16), - child: Card( - margin: const EdgeInsets.all(0), - child: Padding( - padding: const EdgeInsets.all(16), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Flexible( - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - CurrencyDisplayer( - amountToConvert: transaction.value, - currency: transaction.account.currency, - textStyle: TextStyle( - fontSize: 34, - fontWeight: FontWeight.w600, - color: transaction.status == - TransactionStatus.voided - ? Colors.grey.shade400 - : transaction.type == - TransactionType.income - ? CustomColors.of(context) - .success - : transaction.type == - TransactionType.expense - ? CustomColors.of(context) - .danger - : null, - decoration: transaction.status == - TransactionStatus.voided - ? TextDecoration.lineThrough - : null, - ), + child: Card( + margin: const EdgeInsets.only( + left: 16, right: 16, bottom: 8, top: 16), + elevation: 0, + color: AppColors.of(context).light, + child: Padding( + padding: const EdgeInsets.all(16), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Flexible( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + CurrencyDisplayer( + amountToConvert: transaction.value, + currency: transaction.account.currency, + textStyle: TextStyle( + fontSize: 34, + fontWeight: FontWeight.w600, + color: transaction.status == + TransactionStatus.voided + ? Colors.grey.shade400 + : transaction.type == + TransactionType.income + ? AppColors.of(context).success + : transaction.type == + TransactionType.expense + ? AppColors.of(context).danger + : null, + decoration: transaction.status == + TransactionStatus.voided + ? TextDecoration.lineThrough + : null, + ), + ), + Text( + transaction.displayName(context), + softWrap: true, + overflow: TextOverflow.fade, + style: const TextStyle( + fontSize: 16, + fontWeight: FontWeight.w600, ), + ), + if (transaction.recurrentInfo.isNoRecurrent) Text( - transaction.displayName(context), - softWrap: true, - overflow: TextOverflow.fade, - style: const TextStyle( - fontSize: 16, - fontWeight: FontWeight.w600, - ), + DateFormat.yMMMMd() + .add_Hm() + .format(transaction.date), + ) + else + Row( + children: [ + Icon( + Icons.repeat_rounded, + size: 14, + color: Theme.of(context) + .colorScheme + .primary, + ), + const SizedBox(width: 4), + Text( + transaction.recurrentInfo + .formText(context), + style: TextStyle( + fontWeight: FontWeight.w300, + color: Theme.of(context) + .colorScheme + .primary), + ), + ], ), - if (transaction.recurrentInfo.isNoRecurrent) - Text( - DateFormat.yMMMMd() - .add_Hm() - .format(transaction.date), - ) - else - Row( - children: [ - Icon( - Icons.repeat_rounded, - size: 14, - color: Theme.of(context) - .colorScheme - .primary, - ), - const SizedBox(width: 4), - Text( - transaction.recurrentInfo - .formText(context), - style: TextStyle( - fontWeight: FontWeight.w300, - color: Theme.of(context) - .colorScheme - .primary), - ), - ], - ), - ], - ), + ], ), - const SizedBox(width: 24), - Hero( - tag: 'transaction-icon-${transaction.id}', - child: Container( - padding: const EdgeInsets.all(12), - decoration: BoxDecoration( - color: transaction - .color(context) - .lighten(0.82), - borderRadius: BorderRadius.circular(12), - border: Border.all( - color: transaction.color(context), - width: 2, - ), + ), + const SizedBox(width: 24), + Hero( + tag: 'transaction-icon-${transaction.id}', + child: Container( + padding: const EdgeInsets.all(12), + decoration: BoxDecoration( + color: + transaction.color(context).lighten(0.82), + borderRadius: BorderRadius.circular(12), + border: Border.all( + color: transaction.color(context), + width: 2, ), - child: transaction.isIncomeOrExpense - ? transaction.category!.icon.display( - color: transaction.color(context), - size: 42, - ) - : Icon( - color: transaction.color(context), - TransactionType.transfer.icon, - size: 42, - ), ), + child: transaction.isIncomeOrExpense + ? transaction.category!.icon.display( + color: transaction.color(context), + size: 42, + ) + : Icon( + color: transaction.color(context), + TransactionType.transfer.icon, + size: 42, + ), ), - ], - ), + ), + ], ), ), ), ), Expanded( child: SingleChildScrollView( - padding: const EdgeInsets.fromLTRB(16, 0, 16, 24), + padding: const EdgeInsets.fromLTRB(16, 8, 16, 24), child: Column( children: [ if (transaction.status != null || @@ -607,13 +603,12 @@ class _TransactionDetailsPageState extends State { .displayFilled( padding: 2, borderRadius: 100, - color: - Theme.of(context).brightness == - Brightness.light - ? appColorScheme(context) - .primary - : appColorScheme(context) - .primaryContainer, + color: Theme.of(context) + .brightness == + Brightness.light + ? AppColors.of(context).primary + : AppColors.of(context) + .primaryContainer, ), const SizedBox(width: 6), Text(transaction.account.name) diff --git a/lib/app/transactions/transactions.page.dart b/lib/app/transactions/transactions.page.dart index 301fb4c7..0a0719c1 100644 --- a/lib/app/transactions/transactions.page.dart +++ b/lib/app/transactions/transactions.page.dart @@ -144,13 +144,15 @@ class _TransactionsPageState extends State { final res = snapshot.data; return Card( - elevation: 3, - //color: appColorScheme(context).primary, - margin: const EdgeInsets.all(0), + elevation: 2, + //color: AppColors.of(context).primary, + margin: const EdgeInsets.all(8), shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(0)), + borderRadius: BorderRadius.circular(6), + ), child: Padding( - padding: const EdgeInsets.fromLTRB(16, 12, 24, 12), + padding: + const EdgeInsets.symmetric(vertical: 8, horizontal: 14), child: DefaultTextStyle( style: Theme.of(context).textTheme.titleMedium!, child: Row( diff --git a/lib/app/transactions/widgets/transaction_list.dart b/lib/app/transactions/widgets/transaction_list.dart index 27ee7354..3e7cc8b7 100644 --- a/lib/app/transactions/widgets/transaction_list.dart +++ b/lib/app/transactions/widgets/transaction_list.dart @@ -4,10 +4,11 @@ import 'package:monekin/app/transactions/widgets/transaction_list_tile.dart'; import 'package:monekin/core/database/services/account/account_service.dart'; import 'package:monekin/core/database/services/transaction/transaction_service.dart'; import 'package:monekin/core/models/transaction/transaction_periodicity.dart'; -import 'package:monekin/core/presentation/theme.dart'; import 'package:monekin/core/presentation/widgets/number_ui_formatters/currency_displayer.dart'; import 'package:monekin/core/presentation/widgets/transaction_filter/transaction_filters.dart'; +import '../../../core/presentation/app_colors.dart'; + class TransactionListComponent extends StatefulWidget { const TransactionListComponent({ super.key, @@ -74,7 +75,7 @@ class _TransactionListComponentState extends State { child: Container( padding: const EdgeInsets.fromLTRB(16, 4, 12, 4), decoration: BoxDecoration( - color: appColorScheme(context).surfaceVariant, + color: AppColors.of(context).light, borderRadius: const BorderRadius.only( bottomRight: Radius.circular(120), topRight: Radius.circular(120), diff --git a/lib/app/transactions/widgets/transaction_list_tile.dart b/lib/app/transactions/widgets/transaction_list_tile.dart index 37bb91bc..f08ce537 100644 --- a/lib/app/transactions/widgets/transaction_list_tile.dart +++ b/lib/app/transactions/widgets/transaction_list_tile.dart @@ -4,12 +4,14 @@ import 'package:intl/intl.dart'; import 'package:monekin/core/models/transaction/transaction.dart'; import 'package:monekin/core/models/transaction/transaction_periodicity.dart'; import 'package:monekin/core/models/transaction/transaction_status.dart'; -import 'package:monekin/core/routes/app_router.dart'; import 'package:monekin/core/presentation/widgets/number_ui_formatters/currency_displayer.dart'; import 'package:monekin/core/presentation/widgets/number_ui_formatters/ui_number_formatter.dart'; +import 'package:monekin/core/routes/app_router.dart'; import 'package:monekin/core/services/view-actions/transaction_view_actions_service.dart'; import 'package:monekin/core/utils/color_utils.dart'; +import '../../../core/presentation/app_colors.dart'; + class TransactionListTile extends StatelessWidget { const TransactionListTile( {super.key, @@ -74,7 +76,7 @@ class TransactionListTile extends StatelessWidget { Icon( transaction.status?.icon ?? Icons.repeat, color: transaction.status?.color.darken(0.1) ?? - Theme.of(context).colorScheme.primary, + AppColors.of(context).primary, size: 12, ) ], diff --git a/lib/core/models/account/account.dart b/lib/core/models/account/account.dart index 739a84c4..8cee6c86 100644 --- a/lib/core/models/account/account.dart +++ b/lib/core/models/account/account.dart @@ -4,6 +4,8 @@ import 'package:monekin/core/models/supported-icon/supported_icon.dart'; import 'package:monekin/core/services/supported_icon/supported_icon_service.dart'; import 'package:monekin/i18n/translations.g.dart'; +import '../../presentation/app_colors.dart'; + enum AccountType { /// A normal type of account The default type normal, @@ -74,11 +76,9 @@ class Account extends AccountInDB { padding: EdgeInsets.all(size * 0.185), decoration: BoxDecoration( color: Theme.of(context).colorScheme.onPrimary, - border: Border.all( - width: 2, color: Theme.of(context).colorScheme.primary), + border: Border.all(width: 2, color: AppColors.of(context).primary), borderRadius: BorderRadius.circular(1000)), - child: icon.display( - size: size, color: Theme.of(context).colorScheme.primary), + child: icon.display(size: size, color: AppColors.of(context).primary), ); } diff --git a/lib/core/models/transaction/transaction.dart b/lib/core/models/transaction/transaction.dart index 1ad5e264..cc6377ba 100644 --- a/lib/core/models/transaction/transaction.dart +++ b/lib/core/models/transaction/transaction.dart @@ -7,10 +7,11 @@ import 'package:monekin/core/models/transaction/recurrency_data.dart'; import 'package:monekin/core/models/transaction/rule_recurrent_limit.dart'; import 'package:monekin/core/models/transaction/transaction_periodicity.dart'; import 'package:monekin/core/models/transaction/transaction_status.dart'; -import 'package:monekin/core/presentation/theme.dart'; import 'package:monekin/core/utils/color_utils.dart'; import 'package:monekin/i18n/translations.g.dart'; +import '../../presentation/app_colors.dart'; + /// All the possible types of a transaction enum TransactionType { income, @@ -52,12 +53,12 @@ enum TransactionType { Color color(BuildContext context) { if (this == income) { - return CustomColors.of(context).success; + return AppColors.of(context).success; } else if (this == expense) { - return CustomColors.of(context).danger; + return AppColors.of(context).danger; } - return appColorScheme(context).primary; + return AppColors.of(context).primary; } } @@ -73,9 +74,9 @@ enum NextPayStatus { Color color(BuildContext context) { if (this == planified) { - return appColorScheme(context).primary; + return AppColors.of(context).primary; } else if (this == delayed) { - return CustomColors.of(context).danger; + return AppColors.of(context).danger; } return Colors.amber; @@ -179,7 +180,7 @@ class MoneyTransaction extends TransactionInDB { /// Get the color that represent this category. Will be the category color when the transaction is an income or an expense, and the primary color of the app otherwise Color color(context) => isIncomeOrExpense ? ColorHex.get(category!.color) - : appColorScheme(context).primary; + : AppColors.of(context).primary; /// The type of the transaction (expense, income or transfer) TransactionType get type => isTransfer diff --git a/lib/core/presentation/app_colors.dart b/lib/core/presentation/app_colors.dart new file mode 100644 index 00000000..ea355419 --- /dev/null +++ b/lib/core/presentation/app_colors.dart @@ -0,0 +1,137 @@ +import 'package:flutter/material.dart'; +import 'package:monekin/core/presentation/theme.dart'; +import 'package:monekin/core/utils/color_utils.dart'; + +class AppColors extends ThemeExtension { + const AppColors({ + required this.danger, + required this.success, + required this.light, + required this.dark, + required this.shadowColor, + required this.shadowColorLight, + required this.brand, + required this.primary, + required this.onPrimary, + required this.primaryContainer, + required this.onPrimaryContainer, + required this.background, + required this.onBackground, + }); + + final Color danger; + final Color success; + final Color brand; + final Color light; + final Color dark; + final Color shadowColor; + final Color shadowColorLight; + + /* ---- From the material color scheme: ---- */ + final Color primary; + final Color onPrimary; + final Color primaryContainer; + final Color onPrimaryContainer; + final Color background; + final Color onBackground; + + static AppColors fromColorScheme(ColorScheme colorScheme) { + final isDark = colorScheme.brightness == Brightness.dark; + + return AppColors( + danger: isDark ? Colors.redAccent : Colors.red, + success: + isDark ? Colors.lightGreen : const Color.fromARGB(255, 55, 161, 59), + brand: brandBlue, + + light: isDark + ? colorScheme.surfaceTint.withAlpha(10) + : colorScheme.surfaceTint.withAlpha(20), + + dark: isDark + ? colorScheme.onSurfaceVariant.darken() + : colorScheme.onSurfaceVariant.lighten(), + + shadowColor: isDark + ? const Color.fromARGB(105, 189, 189, 189) + : const Color.fromARGB(100, 90, 90, 90), + + shadowColorLight: isDark + ? const Color.fromARGB(40, 116, 116, 116) + : const Color.fromARGB(44, 90, 90, 90), + + // Colors from the material color scheme: + primary: colorScheme.primary, + onPrimary: colorScheme.onPrimary, + primaryContainer: colorScheme.primaryContainer, + onPrimaryContainer: colorScheme.onPrimaryContainer, + background: colorScheme.background, + onBackground: colorScheme.onBackground, + ); + } + + static AppColors of(BuildContext context) { + return Theme.of(context).extension()!; + } + + @override + AppColors copyWith( + {Color? danger, + Color? success, + Color? brand, + Color? primary, + Color? dark, + Color? light, + Color? shadowColor, + Color? shadowColorLight, + Color? onPrimary, + Color? primaryContainer, + Color? onPrimaryContainer, + Color? background, + Color? onBackground}) { + return AppColors( + danger: danger ?? this.danger, + success: success ?? this.success, + light: light ?? this.light, + dark: dark ?? this.dark, + brand: brand ?? this.brand, + shadowColor: shadowColor ?? this.shadowColor, + shadowColorLight: shadowColorLight ?? this.shadowColorLight, + primary: primary ?? this.primary, + onPrimary: onPrimary ?? this.onPrimary, + primaryContainer: primaryContainer ?? this.primaryContainer, + onPrimaryContainer: onPrimaryContainer ?? this.onPrimaryContainer, + background: background ?? this.background, + onBackground: onBackground ?? this.onBackground, + ); + } + + @override + AppColors lerp(ThemeExtension? other, double t) { + if (other is! AppColors) { + return this; + } + return AppColors( + danger: Color.lerp(danger, other.danger, t) ?? danger, + success: Color.lerp(success, other.success, t) ?? success, + light: Color.lerp(light, other.light, t) ?? light, + dark: Color.lerp(dark, other.dark, t) ?? dark, + shadowColor: Color.lerp(shadowColor, other.shadowColor, t) ?? shadowColor, + shadowColorLight: + Color.lerp(shadowColorLight, other.shadowColorLight, t) ?? + shadowColorLight, + brand: Color.lerp(brand, other.brand, t) ?? brand, + primary: Color.lerp(primary, other.primary, t) ?? primary, + onPrimary: Color.lerp(onPrimary, other.onPrimary, t) ?? onPrimary, + primaryContainer: + Color.lerp(primaryContainer, other.primaryContainer, t) ?? + primaryContainer, + onPrimaryContainer: + Color.lerp(onPrimaryContainer, other.onPrimaryContainer, t) ?? + onPrimaryContainer, + background: Color.lerp(background, other.background, t) ?? background, + onBackground: + Color.lerp(onBackground, other.onBackground, t) ?? onBackground, + ); + } +} diff --git a/lib/core/presentation/theme.dart b/lib/core/presentation/theme.dart index 02b149b1..fc84f0f8 100644 --- a/lib/core/presentation/theme.dart +++ b/lib/core/presentation/theme.dart @@ -2,70 +2,13 @@ import 'package:dynamic_color/dynamic_color.dart'; import 'package:flutter/material.dart'; import 'package:monekin/core/utils/color_utils.dart'; +import 'app_colors.dart'; + bool isAppUsingDynamicColors = false; /// Monekin brand color. const brandBlue = Color(0xFF0F3375); -CustomColors lightCustomColors = const CustomColors( - danger: Colors.red, - success: Color.fromARGB(255, 55, 161, 59), - brand: brandBlue); -CustomColors darkCustomColors = const CustomColors( - danger: Colors.redAccent, success: Colors.lightGreen, brand: brandBlue); - -ColorScheme appColorScheme(BuildContext context) { - return Theme.of(context).colorScheme; -} - -@immutable -class CustomColors extends ThemeExtension { - const CustomColors({ - required this.danger, - required this.success, - required this.brand, - }); - - final Color danger; - final Color success; - final Color brand; - - static CustomColors of(BuildContext context) { - return MediaQuery.of(context).platformBrightness == Brightness.dark - ? darkCustomColors - : lightCustomColors; - } - - @override - CustomColors copyWith({Color? danger, Color? success, Color? brand}) { - return CustomColors( - danger: danger ?? this.danger, - success: success ?? this.success, - brand: brand ?? this.brand, - ); - } - - @override - CustomColors lerp(ThemeExtension? other, double t) { - if (other is! CustomColors) { - return this; - } - return CustomColors( - danger: Color.lerp(danger, other.danger, t) ?? danger, - success: Color.lerp(success, other.success, t) ?? success, - brand: Color.lerp(brand, other.brand, t) ?? brand, - ); - } - - CustomColors harmonized(ColorScheme dynamic) { - return copyWith( - danger: danger.harmonizeWith(dynamic.primary), - brand: brand.harmonizeWith(dynamic.primary), - success: success.harmonizeWith(dynamic.primary), - ); - } -} - ThemeData getThemeData( BuildContext context, { required bool isDark, @@ -79,18 +22,17 @@ ThemeData getThemeData( ColorScheme lightColorScheme; ColorScheme darkColorScheme; + /// Fallback scheme for a not-dynamic mode in dark or light mode: + ColorScheme fallbackScheme = ColorScheme.fromSeed( + seedColor: accentColor == 'auto' ? brandBlue : ColorHex.get(accentColor), + brightness: isDark ? Brightness.dark : Brightness.light, + background: isDark && amoledMode ? Colors.black : null); + if (lightDynamic != null && darkDynamic != null && accentColor == 'auto') { // On Android S+ devices, use the provided dynamic color scheme. // (Recommended) Harmonize the dynamic color scheme' built-in semantic colors. lightColorScheme = lightDynamic.harmonized(); - // (Optional) Customize the scheme as desired. For example, one might - // want to use a brand color to override the dynamic [ColorScheme.secondary]. - // lightColorScheme = lightColorScheme.copyWith(secondary: _brandBlue); - - // (Optional) If applicable, harmonize custom colors. - lightCustomColors = lightCustomColors.harmonized(lightColorScheme); - // Repeat for the dark color scheme. darkColorScheme = darkDynamic.harmonized(); @@ -98,27 +40,19 @@ ThemeData getThemeData( darkColorScheme = darkColorScheme.copyWith(background: Colors.black); } - darkCustomColors = darkCustomColors.harmonized(darkColorScheme); - isAppUsingDynamicColors = true; // ignore, only for demo purposes } else { // Otherwise, use fallback schemes. - lightColorScheme = ColorScheme.fromSeed( - seedColor: accentColor == 'auto' ? brandBlue : ColorHex.get(accentColor), - ); - darkColorScheme = ColorScheme.fromSeed( - seedColor: - accentColor == 'auto' ? brandBlue : ColorHex.get(accentColor), - brightness: Brightness.dark, - background: amoledMode ? Colors.black : null); + lightColorScheme = fallbackScheme; + darkColorScheme = fallbackScheme; } theme = ThemeData( - colorScheme: isDark ? darkColorScheme : lightColorScheme, - brightness: isDark ? Brightness.dark : Brightness.light, - useMaterial3: true, - fontFamily: 'Nunito', - ); + colorScheme: isDark ? darkColorScheme : lightColorScheme, + brightness: isDark ? Brightness.dark : Brightness.light, + useMaterial3: true, + fontFamily: 'Nunito', + extensions: [AppColors.fromColorScheme(fallbackScheme)]); final listTileSmallText = TextStyle( color: theme.textTheme.bodyMedium?.color, @@ -128,15 +62,6 @@ ThemeData getThemeData( fontFamily: 'Nunito'); return theme.copyWith( - appBarTheme: AppBarTheme( - backgroundColor: isDark - ? theme.colorScheme.primaryContainer - : theme.colorScheme.primary, - foregroundColor: isDark - ? theme.colorScheme.onPrimaryContainer - : theme.colorScheme.onPrimary, - shadowColor: theme.primaryColorDark, - ), dividerTheme: const DividerThemeData(space: 0), cardColor: theme.colorScheme.surface, inputDecorationTheme: const InputDecorationTheme( @@ -159,15 +84,5 @@ ThemeData getThemeData( listTileSmallText.copyWith(fontWeight: FontWeight.w300), leadingAndTrailingTextStyle: listTileSmallText, ), - tabBarTheme: TabBarTheme( - unselectedLabelColor: isDark - ? theme.colorScheme.onPrimaryContainer - : theme.colorScheme.onPrimary, - labelColor: isDark - ? theme.colorScheme.primary - : theme.colorScheme.primaryContainer, - indicatorColor: isDark - ? theme.colorScheme.primary - : theme.colorScheme.primaryContainer), ); } diff --git a/lib/core/presentation/widgets/animated_progress_bar.dart b/lib/core/presentation/widgets/animated_progress_bar.dart index babfa086..7763f53f 100644 --- a/lib/core/presentation/widgets/animated_progress_bar.dart +++ b/lib/core/presentation/widgets/animated_progress_bar.dart @@ -1,5 +1,7 @@ import 'package:flutter/material.dart'; +import '../app_colors.dart'; + class AnimatedProgressBar extends StatefulWidget { const AnimatedProgressBar( {super.key, @@ -43,7 +45,7 @@ class _AnimatedProgressBarState extends State { topRight: Radius.circular(widget.radius), ); - final barColor = widget.color ?? Theme.of(context).colorScheme.primary; + final barColor = widget.color ?? AppColors.of(context).primary; return TweenAnimationBuilder( duration: Duration(milliseconds: widget.animationDuration), diff --git a/lib/core/presentation/widgets/card_with_header.dart b/lib/core/presentation/widgets/card_with_header.dart index df9bb052..0f03a15c 100644 --- a/lib/core/presentation/widgets/card_with_header.dart +++ b/lib/core/presentation/widgets/card_with_header.dart @@ -1,5 +1,7 @@ import 'package:flutter/material.dart'; +import '../app_colors.dart'; + class CardWithHeader extends StatelessWidget { const CardWithHeader({ super.key, @@ -24,20 +26,41 @@ class CardWithHeader extends StatelessWidget { Widget build(BuildContext context) { const double iconSize = 16; - return Card( - elevation: 1, + return Container( clipBehavior: Clip.hardEdge, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(12), + color: AppColors.of(context).background, + border: Border.all( + width: 1, + color: Theme.of(context).dividerColor, + ), + boxShadow: [ + BoxShadow( + color: AppColors.of(context).shadowColorLight, + blurRadius: 12, + offset: const Offset(0, 0), + spreadRadius: 4, + ), + ], + ), margin: const EdgeInsets.all(0), child: Column( children: [ Container( + clipBehavior: Clip.hardEdge, padding: EdgeInsets.fromLTRB( 16, onHeaderButtonClick != null ? 2 : iconSize - 6, 2, onHeaderButtonClick != null ? 2 : iconSize - 6), decoration: BoxDecoration( - color: Theme.of(context).colorScheme.primaryContainer), + borderRadius: const BorderRadius.only( + topLeft: Radius.circular(12), + topRight: Radius.circular(12), + ), + color: AppColors.of(context).light, + ), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ @@ -48,7 +71,7 @@ class CardWithHeader extends StatelessWidget { IconButton( onPressed: onHeaderButtonClick, iconSize: iconSize, - color: Theme.of(context).colorScheme.primary, + color: AppColors.of(context).primary, icon: Icon(headerButtonIcon), ) ], diff --git a/lib/core/presentation/widgets/currency_selector_modal.dart b/lib/core/presentation/widgets/currency_selector_modal.dart index 704b929c..d9f643b7 100644 --- a/lib/core/presentation/widgets/currency_selector_modal.dart +++ b/lib/core/presentation/widgets/currency_selector_modal.dart @@ -77,7 +77,7 @@ class _CurrencySelectorModalState extends State { ), Chip( side: BorderSide(color: colors.primary, width: 2), - // backgroundColor: Theme.of(context).colorScheme.primaryLight, + // backgroundColor: AppColors.of(context).primaryLight, label: Row( mainAxisSize: MainAxisSize.min, children: [ diff --git a/lib/core/presentation/widgets/icon_selector_modal.dart b/lib/core/presentation/widgets/icon_selector_modal.dart index 7c1b57d7..045c857a 100644 --- a/lib/core/presentation/widgets/icon_selector_modal.dart +++ b/lib/core/presentation/widgets/icon_selector_modal.dart @@ -76,7 +76,7 @@ class _IconSelectorModalState extends State { ), Chip( side: BorderSide(color: colors.primary, width: 2), - // backgroundColor: Theme.of(context).colorScheme.primaryLight, + // backgroundColor: AppColors.of(context).primaryLight, label: _selectedIcon! .display(size: 34, color: colors.onBackground), ) diff --git a/lib/core/presentation/widgets/inline_info_card.dart b/lib/core/presentation/widgets/inline_info_card.dart index 867afbdd..396ed1fe 100644 --- a/lib/core/presentation/widgets/inline_info_card.dart +++ b/lib/core/presentation/widgets/inline_info_card.dart @@ -1,6 +1,8 @@ import 'package:flutter/material.dart'; import 'package:monekin/core/presentation/responsive/responsive_row_column.dart'; +import '../app_colors.dart'; + enum InlineInfoCardMode { warn, info } class InlineInfoCard extends StatelessWidget { @@ -19,7 +21,7 @@ class InlineInfoCard extends StatelessWidget { @override Widget build(BuildContext context) { final Color color = mode == InlineInfoCardMode.info - ? Theme.of(context).colorScheme.primary + ? AppColors.of(context).primary : Colors.amber; return Card( diff --git a/lib/core/presentation/widgets/transaction_filter/filter_sheet_modal.dart b/lib/core/presentation/widgets/transaction_filter/filter_sheet_modal.dart index fbcc35fd..154ac1bd 100644 --- a/lib/core/presentation/widgets/transaction_filter/filter_sheet_modal.dart +++ b/lib/core/presentation/widgets/transaction_filter/filter_sheet_modal.dart @@ -9,7 +9,6 @@ import 'package:monekin/core/database/services/currency/currency_service.dart'; import 'package:monekin/core/database/services/tags/tags_service.dart'; import 'package:monekin/core/models/transaction/transaction.dart'; import 'package:monekin/core/models/transaction/transaction_status.dart'; -import 'package:monekin/core/presentation/theme.dart'; import 'package:monekin/core/presentation/widgets/bottomSheetFooter.dart'; import 'package:monekin/core/presentation/widgets/date_form_field/date_field.dart'; import 'package:monekin/core/presentation/widgets/date_form_field/date_form_field.dart'; @@ -20,6 +19,8 @@ import 'package:monekin/core/presentation/widgets/transaction_filter/transaction import 'package:monekin/core/utils/text_field_utils.dart'; import 'package:monekin/i18n/translations.g.dart'; +import '../../app_colors.dart'; + Future openFilterSheetModal( BuildContext context, FilterSheetModal modalData) { return showModalBottomSheet( @@ -544,8 +545,8 @@ class _FilterSheetModalState extends State { }), showCheckmark: false, avatar: Icon(Icons.label_off_rounded, - color: appColorScheme(context) - .primary), + color: + AppColors.of(context).primary), ), if (snapshot.data != null) ...List.generate(snapshot.data!.length, @@ -603,7 +604,7 @@ class _FilterSheetModalState extends State { ), ), ScrollableWithBottomGradient.buildPositionedGradient( - appColorScheme(context).background), + AppColors.of(context).background), ], ), ), diff --git a/lib/core/presentation/widgets/transaction_filter/status_filter/transaction_status_filter_chip.dart b/lib/core/presentation/widgets/transaction_filter/status_filter/transaction_status_filter_chip.dart index b4a44810..3389539b 100644 --- a/lib/core/presentation/widgets/transaction_filter/status_filter/transaction_status_filter_chip.dart +++ b/lib/core/presentation/widgets/transaction_filter/status_filter/transaction_status_filter_chip.dart @@ -1,8 +1,9 @@ import 'package:flutter/material.dart'; import 'package:monekin/core/models/transaction/transaction_status.dart'; -import 'package:monekin/core/presentation/theme.dart'; import 'package:monekin/i18n/translations.g.dart'; +import '../../../app_colors.dart'; + class TransactionStatusFilterChip extends StatelessWidget { const TransactionStatusFilterChip( {super.key, @@ -25,7 +26,7 @@ class TransactionStatusFilterChip extends StatelessWidget { showCheckmark: false, avatar: Icon( status?.icon ?? Icons.circle_outlined, - color: status?.color ?? appColorScheme(context).primary, + color: status?.color ?? AppColors.of(context).primary, ), onSelected: onSelected); } diff --git a/lib/core/presentation/widgets/trending_value.dart b/lib/core/presentation/widgets/trending_value.dart index a7b1bf13..74f162ba 100644 --- a/lib/core/presentation/widgets/trending_value.dart +++ b/lib/core/presentation/widgets/trending_value.dart @@ -1,8 +1,9 @@ import 'package:flutter/material.dart'; -import 'package:monekin/core/presentation/theme.dart'; import 'package:monekin/core/presentation/widgets/number_ui_formatters/ui_number_formatter.dart'; import 'package:monekin/core/utils/color_utils.dart'; +import '../app_colors.dart'; + class TrendingValue extends StatelessWidget { const TrendingValue( {super.key, @@ -58,10 +59,10 @@ class TrendingValue extends StatelessWidget { Color _getColorBasedOnPercentage(BuildContext context) { return percentage == 0 - ? CustomColors.of(context).brand.lighten(0.35).withBlue(225) + ? AppColors.of(context).brand.lighten(0.35).withBlue(225) : percentage > 0 - ? CustomColors.of(context).success - : CustomColors.of(context).danger; + ? AppColors.of(context).success + : AppColors.of(context).danger; } @override diff --git a/lib/core/services/filters/custom_date_range_picker.dart b/lib/core/services/filters/custom_date_range_picker.dart index 0b8e6ecf..cc666e51 100644 --- a/lib/core/services/filters/custom_date_range_picker.dart +++ b/lib/core/services/filters/custom_date_range_picker.dart @@ -4,6 +4,7 @@ import 'package:flutter/material.dart'; import 'package:intl/intl.dart'; import 'package:monekin/i18n/translations.g.dart'; +import '../../presentation/app_colors.dart'; import '../../utils/date_time_picker.dart'; class CustomDateRangePicker extends StatefulWidget { @@ -72,7 +73,7 @@ class _CustomDateRangePickerState extends State { child: ClipRRect( borderRadius: BorderRadius.circular(20), child: ColoredBox( - color: Theme.of(context).colorScheme.background, + color: AppColors.of(context).background, child: Column( mainAxisSize: MainAxisSize.min, children: [ diff --git a/lib/core/services/filters/date_range_service.dart b/lib/core/services/filters/date_range_service.dart index c331ac57..b2f1dbe1 100644 --- a/lib/core/services/filters/date_range_service.dart +++ b/lib/core/services/filters/date_range_service.dart @@ -6,6 +6,8 @@ import 'package:monekin/core/services/filters/custom_date_range_picker.dart'; import 'package:monekin/core/utils/constants.dart'; import 'package:monekin/i18n/translations.g.dart'; +import '../../presentation/app_colors.dart'; + enum DateRange { weekly, monthly, @@ -114,8 +116,7 @@ class DateRangeService { const EdgeInsets.symmetric(vertical: 2, horizontal: 8), child: Text( iconText, - style: TextStyle( - color: Theme.of(context).colorScheme.background), + style: TextStyle(color: AppColors.of(context).background), ), ), if (icon != null) Icon(icon, size: 25), diff --git a/lib/core/utils/list_tile_action_item.dart b/lib/core/utils/list_tile_action_item.dart index 9b14ca58..f01e4338 100644 --- a/lib/core/utils/list_tile_action_item.dart +++ b/lib/core/utils/list_tile_action_item.dart @@ -1,5 +1,6 @@ import 'package:flutter/material.dart'; -import 'package:monekin/core/presentation/theme.dart'; + +import '../presentation/app_colors.dart'; enum ListTileActionRole { delete, warn } @@ -21,12 +22,12 @@ class ListTileActionItem { Color getColorBasedOnRole(BuildContext context) { if (role != null) { if (role == ListTileActionRole.delete) { - return CustomColors.of(context).danger; + return AppColors.of(context).danger; } else if (role == ListTileActionRole.warn) { return Colors.amber.shade400; } } - return Theme.of(context).colorScheme.primary; + return AppColors.of(context).primary; } }