This commit is contained in:
2026-06-21 14:45:30 +03:00
parent 127a917eac
commit 3961327bdb
16 changed files with 852 additions and 396 deletions
+292 -94
View File
@@ -3,12 +3,18 @@ import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:intl/intl.dart';
import '../../core/constants.dart';
import '../../core/l10n/app_strings.dart';
import '../../core/l10n/locale_provider.dart';
import '../../shared/utils/currency_utils.dart';
import '../../core/services/haptic_service.dart';
import '../../shared/providers/amount_format_provider.dart';
import '../../shared/utils/currency_utils.dart';
import '../../shared/widgets/byn_sign.dart';
import '../dashboard/provider.dart';
import '../dashboard/widgets/summary_row.dart';
import '../settings/provider.dart';
import 'provider.dart';
import 'widgets/account_scope_chips.dart';
import 'widgets/stats_hero_card.dart';
enum ChartType { pie, bar }
@@ -24,15 +30,27 @@ class _CategoriesScreenState extends ConsumerState<CategoriesScreen> {
ChartType _chartType = ChartType.pie;
bool _showIncome = false;
String _scopeLabel(AppStrings s) {
final activeAccount = ref.watch(activeAccountProvider);
if (activeAccount == null) return s.allAccounts;
return activeAccount.name;
}
@override
Widget build(BuildContext context) {
final s = ref.watch(stringsProvider);
final data = _showIncome
? ref.watch(categoryIncomeProvider)
: ref.watch(categoryExpenseProvider);
final monthlyData = ref.watch(monthlyBreakdownProvider);
final monthlyData = _showIncome
? ref.watch(monthlyIncomeBreakdownProvider)
: ref.watch(monthlyBreakdownProvider);
final total = data.values.fold(0.0, (a, b) => a + b);
final currencyInfo = ref.watch(currencyProvider);
final currencyInfo = ref.watch(statsCurrencyProvider);
final income = ref.watch(statsIncomeTotalProvider);
final expense = ref.watch(statsExpenseTotalProvider);
final timeFilter = ref.watch(timeFilterProvider);
final scopeLabel = _scopeLabel(s);
final sortedEntries = data.entries.toList()
..sort((a, b) => b.value.compareTo(a.value));
@@ -41,7 +59,7 @@ class _CategoriesScreenState extends ConsumerState<CategoriesScreen> {
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
appBar: AppBar(
title: Text(
s.categories,
s.statistics,
style: Theme.of(context).textTheme.titleLarge?.copyWith(
fontWeight: FontWeight.w700,
color: Theme.of(context).colorScheme.onSurface,
@@ -57,87 +75,59 @@ class _CategoriesScreenState extends ConsumerState<CategoriesScreen> {
),
body: SafeArea(
child: Padding(
padding: const EdgeInsets.fromLTRB(20, 16, 20, 0),
padding: const EdgeInsets.fromLTRB(20, 8, 20, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const AccountScopeChips(),
const SizedBox(height: 12),
StatsHeroCard(
amount: total,
label: _showIncome ? s.income : s.expenses,
accentColor: _showIncome ? AppColors.income : AppColors.expense,
scopeLabel: scopeLabel,
),
const SizedBox(height: 12),
SummaryRow(
income: income,
expense: expense,
currencyInfo: currencyInfo,
strings: s,
),
const SizedBox(height: 12),
_StatsTimeFilter(
strings: s,
timeFilter: timeFilter,
onAllTime: () =>
ref.read(timeFilterProvider.notifier).set(TimeFilter.allTime),
onMonth: () => ref
.read(timeFilterProvider.notifier)
.set(TimeFilter.lastMonth),
),
const SizedBox(height: 12),
Row(
children: [
Expanded(
child: GestureDetector(
child: _TypeToggle(
label: s.expenses,
isSelected: !_showIncome,
color: AppColors.expense,
onTap: () => setState(() {
_showIncome = false;
_touchedIndex = -1;
}),
child: Container(
padding: const EdgeInsets.symmetric(vertical: 10),
decoration: BoxDecoration(
color: !_showIncome
? AppColors.accent
: Colors.transparent,
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: !_showIncome
? AppColors.accent
: Theme.of(
context,
).colorScheme.onSurface.withOpacity(0.2),
width: 1.5,
),
),
child: Text(
s.expenses,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w600,
color: !_showIncome
? Colors.white
: Theme.of(
context,
).colorScheme.onSurface.withOpacity(0.6),
),
),
),
),
),
const SizedBox(width: 12),
Expanded(
child: GestureDetector(
child: _TypeToggle(
label: s.income,
isSelected: _showIncome,
color: AppColors.income,
onTap: () => setState(() {
_showIncome = true;
_touchedIndex = -1;
}),
child: Container(
padding: const EdgeInsets.symmetric(vertical: 10),
decoration: BoxDecoration(
color: _showIncome
? AppColors.accent
: Colors.transparent,
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: _showIncome
? AppColors.accent
: Theme.of(
context,
).colorScheme.onSurface.withOpacity(0.2),
width: 1.5,
),
),
child: Text(
s.income,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w600,
color: _showIncome
? Colors.white
: Theme.of(
context,
).colorScheme.onSurface.withOpacity(0.6),
),
),
),
),
),
],
@@ -155,12 +145,14 @@ class _CategoriesScreenState extends ConsumerState<CategoriesScreen> {
total: total,
touchedIndex: _touchedIndex,
onTouch: (i) => setState(() => _touchedIndex = i),
currency: currencyInfo.symbol,
currencyInfo: currencyInfo,
isIncome: _showIncome,
)
else
_BarChartCard(
monthlyData: monthlyData,
currency: currencyInfo.symbol,
currencyInfo: currencyInfo,
isIncome: _showIncome,
),
const SizedBox(height: 20),
Text(
@@ -183,7 +175,7 @@ class _CategoriesScreenState extends ConsumerState<CategoriesScreen> {
category: cat,
amount: amount,
total: total,
currency: currencyInfo.symbol,
currencyInfo: currencyInfo,
isIncome: _showIncome,
),
);
@@ -200,6 +192,140 @@ class _CategoriesScreenState extends ConsumerState<CategoriesScreen> {
}
}
class _StatsTimeFilter extends StatelessWidget {
final AppStrings strings;
final TimeFilter timeFilter;
final VoidCallback onAllTime;
final VoidCallback onMonth;
const _StatsTimeFilter({
required this.strings,
required this.timeFilter,
required this.onAllTime,
required this.onMonth,
});
@override
Widget build(BuildContext context) {
final isDark = Theme.of(context).brightness == Brightness.dark;
return Row(
children: [
_TimeChip(
label: strings.filterAllTime,
isSelected: timeFilter == TimeFilter.allTime,
isDark: isDark,
onTap: () {
HapticService.selection();
onAllTime();
},
),
const SizedBox(width: 6),
_TimeChip(
label: strings.filterMonth,
isSelected: timeFilter == TimeFilter.lastMonth,
isDark: isDark,
onTap: () {
HapticService.selection();
onMonth();
},
),
],
);
}
}
class _TimeChip extends StatelessWidget {
final String label;
final bool isSelected;
final bool isDark;
final VoidCallback onTap;
const _TimeChip({
required this.label,
required this.isSelected,
required this.isDark,
required this.onTap,
});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTap,
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
decoration: BoxDecoration(
color: isSelected
? AppColors.accent.withOpacity(0.2)
: Theme.of(context).colorScheme.surface,
borderRadius: BorderRadius.circular(20),
border: isSelected
? Border.all(color: AppColors.accent, width: 1.5)
: isDark
? null
: Border.all(color: const Color(0xFFDDDDEE), width: 1),
),
child: Text(
label,
style: TextStyle(
fontSize: 12,
fontWeight: isSelected ? FontWeight.w600 : FontWeight.normal,
color: isSelected
? AppColors.accent
: Theme.of(context).colorScheme.onSurface.withOpacity(0.6),
),
),
),
);
}
}
class _TypeToggle extends StatelessWidget {
final String label;
final bool isSelected;
final Color color;
final VoidCallback onTap;
const _TypeToggle({
required this.label,
required this.isSelected,
required this.color,
required this.onTap,
});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTap,
child: Container(
padding: const EdgeInsets.symmetric(vertical: 10),
decoration: BoxDecoration(
color: isSelected ? color : Colors.transparent,
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: isSelected
? color
: Theme.of(context).colorScheme.onSurface.withOpacity(0.2),
width: 1.5,
),
),
child: Text(
label,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w600,
color: isSelected
? Colors.white
: Theme.of(context).colorScheme.onSurface.withOpacity(0.6),
),
),
),
);
}
}
class _ChartToggle extends StatelessWidget {
final ChartType selected;
final ValueChanged<ChartType> onChanged;
@@ -207,10 +333,15 @@ class _ChartToggle extends StatelessWidget {
@override
Widget build(BuildContext context) {
final isDark = Theme.of(context).brightness == Brightness.dark;
return Container(
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surface,
borderRadius: BorderRadius.circular(10),
border: isDark
? null
: Border.all(color: const Color(0xFFDDDDEE), width: 1),
),
child: Row(
mainAxisSize: MainAxisSize.min,
@@ -270,14 +401,16 @@ class _PieChartCard extends ConsumerWidget {
final double total;
final int touchedIndex;
final ValueChanged<int> onTouch;
final String currency;
final CurrencyInfo currencyInfo;
final bool isIncome;
const _PieChartCard({
required this.data,
required this.total,
required this.touchedIndex,
required this.onTouch,
required this.currency,
required this.currencyInfo,
required this.isIncome,
});
@override
@@ -285,12 +418,20 @@ class _PieChartCard extends ConsumerWidget {
final s = ref.watch(stringsProvider);
final fmt = ref.watch(amountFormatProvider);
final entries = data.entries.toList();
final isDark = Theme.of(context).brightness == Brightness.dark;
final accent = isIncome ? AppColors.income : AppColors.expense;
return Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surface,
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: isDark
? Colors.white.withOpacity(0.08)
: const Color(0xFFDDDDEE),
width: 1,
),
),
child: Column(
children: [
@@ -327,10 +468,10 @@ class _PieChartCard extends ConsumerWidget {
? '${(val / total * 100).toStringAsFixed(1)}%'
: '',
radius: isTouched ? 60 : 50,
titleStyle: TextStyle(
titleStyle: const TextStyle(
fontSize: 13,
fontWeight: FontWeight.w700,
color: Theme.of(context).colorScheme.onPrimary,
color: Colors.white,
),
);
}),
@@ -348,9 +489,9 @@ class _PieChartCard extends ConsumerWidget {
),
),
Text(
formatAmount(currency, total, fmt),
formatAmount(currencyInfo.symbol, total, fmt),
style: Theme.of(context).textTheme.titleMedium?.copyWith(
color: Theme.of(context).colorScheme.onSurface,
color: accent,
fontWeight: FontWeight.w700,
),
),
@@ -367,16 +508,24 @@ class _PieChartCard extends ConsumerWidget {
class _BarChartCard extends ConsumerWidget {
final List<MonthlyData> monthlyData;
final String currency;
const _BarChartCard({required this.monthlyData, required this.currency});
final CurrencyInfo currencyInfo;
final bool isIncome;
const _BarChartCard({
required this.monthlyData,
required this.currencyInfo,
required this.isIncome,
});
@override
Widget build(BuildContext context, WidgetRef ref) {
final s = ref.watch(stringsProvider);
final fmt = ref.watch(amountFormatProvider);
final maxY = monthlyData
.map((e) => e.amount)
.reduce((a, b) => a > b ? a : b);
final isDark = Theme.of(context).brightness == Brightness.dark;
final barColor = isIncome ? AppColors.income : AppColors.expense;
final maxY = monthlyData.isEmpty
? 100.0
: monthlyData.map((e) => e.amount).reduce((a, b) => a > b ? a : b);
final adjustedMaxY = maxY * 1.2;
return Container(
@@ -384,6 +533,12 @@ class _BarChartCard extends ConsumerWidget {
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surface,
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: isDark
? Colors.white.withOpacity(0.08)
: const Color(0xFFDDDDEE),
width: 1,
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
@@ -406,9 +561,9 @@ class _BarChartCard extends ConsumerWidget {
touchTooltipData: BarTouchTooltipData(
getTooltipItem: (group, groupIndex, rod, rodIndex) {
return BarTooltipItem(
formatAmount(currency, rod.toY, fmt),
TextStyle(
color: Theme.of(context).colorScheme.onPrimary,
formatAmount(currencyInfo.symbol, rod.toY, fmt),
const TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: 12,
),
@@ -469,7 +624,7 @@ class _BarChartCard extends ConsumerWidget {
barRods: [
BarChartRodData(
toY: monthlyData[i].amount,
color: AppColors.accent,
color: barColor,
width: 24,
borderRadius: const BorderRadius.vertical(
top: Radius.circular(6),
@@ -492,14 +647,15 @@ class _CategoryRow extends ConsumerWidget {
final String category;
final double amount;
final double total;
final String currency;
final CurrencyInfo currencyInfo;
final bool isIncome;
const _CategoryRow({
required this.rank,
required this.category,
required this.amount,
required this.total,
required this.currency,
required this.currencyInfo,
required this.isIncome,
});
@@ -507,6 +663,7 @@ class _CategoryRow extends ConsumerWidget {
Widget build(BuildContext context, WidgetRef ref) {
final s = ref.watch(stringsProvider);
final fmt = ref.watch(amountFormatProvider);
final isDark = Theme.of(context).brightness == Brightness.dark;
final color = AppCategories.colors[category] ?? AppColors.accent;
final icon = AppCategories.icons[category] ?? Icons.category_rounded;
final pct = total > 0 ? amount / total : 0.0;
@@ -516,6 +673,12 @@ class _CategoryRow extends ConsumerWidget {
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surface,
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: isDark
? Colors.white.withOpacity(0.08)
: const Color(0xFFDDDDEE),
width: 1,
),
),
child: Column(
children: [
@@ -565,13 +728,39 @@ class _CategoryRow extends ConsumerWidget {
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
formatAmount(currency, amount, fmt),
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: isIncome ? AppColors.income : AppColors.expense,
fontWeight: FontWeight.w700,
),
),
currencyInfo.code == 'BYN'
? Row(
mainAxisSize: MainAxisSize.min,
children: [
BynSign(
fontSize: 14,
color: isIncome
? AppColors.income
: AppColors.expense,
),
const SizedBox(width: 2),
Text(
formatAmount('', amount, fmt),
style: Theme.of(context).textTheme.bodyMedium
?.copyWith(
color: isIncome
? AppColors.income
: AppColors.expense,
fontWeight: FontWeight.w700,
),
),
],
)
: Text(
formatAmount(currencyInfo.symbol, amount, fmt),
style: Theme.of(context).textTheme.bodyMedium
?.copyWith(
color: isIncome
? AppColors.income
: AppColors.expense,
fontWeight: FontWeight.w700,
),
),
Text(
'${(pct * 100).toStringAsFixed(1)}%',
style: Theme.of(context).textTheme.bodySmall?.copyWith(
@@ -607,6 +796,8 @@ class _EmptyState extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final s = ref.watch(stringsProvider);
final isDark = Theme.of(context).brightness == Brightness.dark;
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
@@ -616,6 +807,12 @@ class _EmptyState extends ConsumerWidget {
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surface,
shape: BoxShape.circle,
border: Border.all(
color: isDark
? Colors.white.withOpacity(0.08)
: const Color(0xFFDDDDEE),
width: 1,
),
),
child: Icon(
Icons.pie_chart_outline_rounded,
@@ -634,6 +831,7 @@ class _EmptyState extends ConsumerWidget {
const SizedBox(height: 6),
Text(
isIncome ? s.addIncomeToSeeBreakdown : s.addExpensesToSeeBreakdown,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Theme.of(context).colorScheme.onSurface.withOpacity(0.6),
),