gitea/ingtrakapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

new widget types

Browse Source
This commit is contained in:
davmar
2026-09-10 17:31:18 +02:00
parent 2727f1baf2
commit 86b5f1e09b
8 changed files with 817 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/widgets/home_filter_widget_card.dart
+247 -47
View File
@@ -1,9 +1,12 @@
/// Home card for a saved transaction-filter widget.
library;
import 'dart:math' as math;
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../models/bank.dart';
import '../models/home_filter_widget.dart';
import '../providers/bank_provider.dart';
import '../providers/tx_meta_provider.dart';
@@ -34,7 +37,8 @@ class HomeFilterWidgetCard extends StatelessWidget {
MaterialPageRoute<void>(
builder: (_) => TransactionsScreen(
initialLabelIds: filter.labelIds,
initialSearchInMonthOnly: filter.monthOnly,
initialSearchInMonthOnly:
widgetConfig.type == HomeWidgetType.budget || filter.monthOnly,
initialQuery: filter.query,
initialFlow: filter.flow,
initialAmountRange: filter.amountRange,
@@ -54,12 +58,6 @@ class HomeFilterWidgetCard extends StatelessWidget {
? bank.transactions.first.currency
: 'EUR');
final metrics = computeTxFilterMetrics(
all: bank.transactions,
meta: meta,
filter: widgetConfig.filter,
);
final hidden = editing && !widgetConfig.display;
return Opacity(
@@ -70,9 +68,7 @@ class HomeFilterWidgetCard extends StatelessWidget {
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
child: InkWell(
borderRadius: BorderRadius.circular(16),
onTap: editing
? onEdit
: () => _openTransactions(context),
onTap: editing ? onEdit : () => _openTransactions(context),
child: Padding(
padding: EdgeInsets.fromLTRB(
14,
@@ -86,45 +82,25 @@ class HomeFilterWidgetCard extends StatelessWidget {
dragHandle!,
const SizedBox(width: 4),
],
Icon(
widgetConfig.icon,
color: colors.primary,
),
const SizedBox(width: 10),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widgetConfig.name,
style: theme.textTheme.titleSmall?.copyWith(
fontWeight: FontWeight.w700,
child: widgetConfig.type == HomeWidgetType.budget
? _BudgetBody(
widgetConfig: widgetConfig,
currency: currency,
transactions: bank.transactions,
meta: meta,
)
: _StatsBody(
widgetConfig: widgetConfig,
currency: currency,
transactions: bank.transactions,
meta: meta,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 8),
Wrap(
spacing: 12,
runSpacing: 6,
children: [
if (widgetConfig.showAmountIn)
_Metric(
label: 'In',
value: formatMoney(metrics.amountIn, currency),
color: AppTheme.accent,
),
if (widgetConfig.showAmountOut)
_Metric(
label: 'Out',
value: formatMoney(metrics.amountOut, currency),
color: AppTheme.expense,
),
if (widgetConfig.showCount)
_Metric(
label: 'Txs',
value: '${metrics.count}',
color: colors.primary,
),
],
),
],
),
),
if (editing && onToggleDisplay != null)
IconButton(
@@ -151,6 +127,230 @@ class HomeFilterWidgetCard extends StatelessWidget {
}
}
class _StatsBody extends StatelessWidget {
const _StatsBody({
required this.widgetConfig,
required this.currency,
required this.transactions,
required this.meta,
});
final HomeFilterWidget widgetConfig;
final String currency;
final List<BankTransaction> transactions;
final TxMetaController meta;
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final colors = theme.colorScheme;
final metrics = computeTxFilterMetrics(
all: transactions,
meta: meta,
filter: widgetConfig.filter,
);
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widgetConfig.name,
style: theme.textTheme.titleSmall?.copyWith(
fontWeight: FontWeight.w700,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 8),
Wrap(
spacing: 12,
runSpacing: 6,
children: [
if (widgetConfig.showAmountIn)
_Metric(
label: 'In',
value: formatMoney(metrics.amountIn, currency),
color: AppTheme.accent,
),
if (widgetConfig.showAmountOut)
_Metric(
label: 'Out',
value: formatMoney(metrics.amountOut, currency),
color: AppTheme.expense,
),
if (widgetConfig.showCount)
_Metric(
label: 'Txs',
value: '${metrics.count}',
color: colors.primary,
),
],
),
],
);
}
}
class _BudgetBody extends StatelessWidget {
const _BudgetBody({
required this.widgetConfig,
required this.currency,
required this.transactions,
required this.meta,
});
final HomeFilterWidget widgetConfig;
final String currency;
final List<BankTransaction> transactions;
final TxMetaController meta;
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final colors = theme.colorScheme;
final budget = computeHomeBudgetMetrics(
all: transactions,
meta: meta,
widget: widgetConfig,
);
final progress = budget.progress.clamp(0.0, 1.0);
final over = budget.overBudget;
final fillColor = over ? colors.error : colors.primary;
final trackColor = colors.surfaceContainerHighest;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widgetConfig.name,
style: theme.textTheme.titleSmall?.copyWith(
fontWeight: FontWeight.w700,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 4),
Text(
'${formatMoney(budget.monthNet, currency)} · '
'${formatMoney(budget.used, currency)} / '
'${budget.target <= 0 ? '—' : formatMoney(budget.target, currency)}',
style: theme.textTheme.labelMedium?.copyWith(
color: over ? colors.error : colors.onSurfaceVariant,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 8),
switch (widgetConfig.chartStyle) {
HomeWidgetChartStyle.bar => ClipRRect(
borderRadius: BorderRadius.circular(6),
child: LinearProgressIndicator(
value: budget.target <= 0 ? 0 : progress,
minHeight: 10,
backgroundColor: trackColor,
color: fillColor,
),
),
HomeWidgetChartStyle.pie || HomeWidgetChartStyle.ring => Row(
children: [
SizedBox(
width: 52,
height: 52,
child: CustomPaint(
painter: _BudgetChartPainter(
progress: budget.target <= 0 ? 0 : progress,
style: widgetConfig.chartStyle,
fillColor: fillColor,
trackColor: trackColor,
),
),
),
const SizedBox(width: 10),
Expanded(
child: Text(
over
? 'Over budget'
: budget.target <= 0
? 'Set a budget cap'
: '${(progress * 100).round()}% of cap',
style: theme.textTheme.labelMedium?.copyWith(
color: over ? colors.error : colors.onSurfaceVariant,
),
),
),
],
),
},
],
);
}
}
class _BudgetChartPainter extends CustomPainter {
_BudgetChartPainter({
required this.progress,
required this.style,
required this.fillColor,
required this.trackColor,
});
final double progress;
final HomeWidgetChartStyle style;
final Color fillColor;
final Color trackColor;
@override
void paint(Canvas canvas, Size size) {
final center = Offset(size.width / 2, size.height / 2);
final radius = math.min(size.width, size.height) / 2;
if (style == HomeWidgetChartStyle.pie) {
final rect = Rect.fromCircle(center: center, radius: radius);
final track = Paint()..color = trackColor;
canvas.drawCircle(center, radius, track);
if (progress > 0) {
final sweep = 2 * math.pi * progress.clamp(0.0, 1.0);
final fill = Paint()..color = fillColor;
canvas.drawArc(rect, -math.pi / 2, sweep, true, fill);
}
return;
}
// Ring (activity-style).
const stroke = 7.0;
final trackPaint = Paint()
..color = trackColor
..style = PaintingStyle.stroke
..strokeWidth = stroke
..strokeCap = StrokeCap.round;
final fillPaint = Paint()
..color = fillColor
..style = PaintingStyle.stroke
..strokeWidth = stroke
..strokeCap = StrokeCap.round;
final r = radius - stroke / 2;
canvas.drawCircle(center, r, trackPaint);
if (progress > 0) {
final sweep = 2 * math.pi * progress.clamp(0.0, 1.0);
canvas.drawArc(
Rect.fromCircle(center: center, radius: r),
-math.pi / 2,
sweep,
false,
fillPaint,
);
}
}
@override
bool shouldRepaint(covariant _BudgetChartPainter oldDelegate) {
return oldDelegate.progress != progress ||
oldDelegate.style != style ||
oldDelegate.fillColor != fillColor ||
oldDelegate.trackColor != trackColor;
}
}
class _Metric extends StatelessWidget {
const _Metric({
required this.label,
lib/widgets/home_widgets_sheet.dart
+231 -37
View File
@@ -80,10 +80,23 @@ Future<HomeFilterWidget?> _promptWidgetMetrics(
BuildContext context,
HomeFilterWidget draft,
) {
var type = draft.type;
var iconId = draft.iconId;
var chartStyle = draft.chartStyle;
var budgetCapMode = draft.budgetCapMode;
var budgetFixedAmount = draft.budgetFixedAmount;
var budgetAverageMonths = draft.budgetAverageMonths;
var showIn = draft.showAmountIn;
var showOut = draft.showAmountOut;
var showCount = draft.showCount;
var halfWidth = draft.halfWidth;
final amountController = TextEditingController(
text: budgetFixedAmount > 0
? (budgetFixedAmount == budgetFixedAmount.roundToDouble()
? budgetFixedAmount.toStringAsFixed(0)
: budgetFixedAmount.toStringAsFixed(2))
: '',
);
return showDialog<HomeFilterWidget>(
context: context,
@@ -91,40 +104,195 @@ Future<HomeFilterWidget?> _promptWidgetMetrics(
builder: (context) {
return StatefulBuilder(
builder: (context, setState) {
final theme = Theme.of(context);
return AlertDialog(
title: const Text('Widget options'),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
CheckboxListTile(
contentPadding: EdgeInsets.zero,
title: const Text('Amount in'),
value: showIn,
onChanged: (value) =>
setState(() => showIn = value ?? false),
content: SizedBox(
width: 360,
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text('Type', style: theme.textTheme.titleSmall),
const SizedBox(height: 8),
SegmentedButton<HomeWidgetType>(
segments: const [
ButtonSegment(
value: HomeWidgetType.stats,
label: Text('Stats'),
icon: Icon(Icons.analytics_outlined),
),
ButtonSegment(
value: HomeWidgetType.budget,
label: Text('Budget'),
icon: Icon(Icons.savings_outlined),
),
],
selected: {type},
onSelectionChanged: (value) {
setState(() => type = value.first);
},
),
const SizedBox(height: 16),
Text('Icon', style: theme.textTheme.titleSmall),
const SizedBox(height: 8),
Wrap(
spacing: 6,
runSpacing: 6,
children: [
for (final entry in HomeWidgetIcons.all)
ChoiceChip(
label: Icon(entry.$2, size: 18),
selected: iconId == entry.$1,
onSelected: (_) =>
setState(() => iconId = entry.$1),
tooltip: entry.$3,
visualDensity: VisualDensity.compact,
padding: const EdgeInsets.all(4),
),
],
),
const SizedBox(height: 12),
SwitchListTile(
contentPadding: EdgeInsets.zero,
title: const Text('Half width'),
subtitle:
const Text('Share the row with another widget'),
value: halfWidth,
onChanged: (value) =>
setState(() => halfWidth = value),
),
if (type == HomeWidgetType.stats) ...[
const Divider(),
CheckboxListTile(
contentPadding: EdgeInsets.zero,
title: const Text('Amount in'),
value: showIn,
onChanged: (value) =>
setState(() => showIn = value ?? false),
),
CheckboxListTile(
contentPadding: EdgeInsets.zero,
title: const Text('Amount out'),
value: showOut,
onChanged: (value) =>
setState(() => showOut = value ?? false),
),
CheckboxListTile(
contentPadding: EdgeInsets.zero,
title: const Text('Number of transactions'),
value: showCount,
onChanged: (value) =>
setState(() => showCount = value ?? false),
),
] else ...[
const Divider(),
Text('Budget cap', style: theme.textTheme.titleSmall),
const SizedBox(height: 8),
SegmentedButton<HomeBudgetCapMode>(
segments: const [
ButtonSegment(
value: HomeBudgetCapMode.fixed,
label: Text('Fixed'),
),
ButtonSegment(
value: HomeBudgetCapMode.averageMonths,
label: Text('Average'),
),
],
selected: {budgetCapMode},
onSelectionChanged: (value) {
setState(() => budgetCapMode = value.first);
},
),
const SizedBox(height: 12),
if (budgetCapMode == HomeBudgetCapMode.fixed)
TextField(
controller: amountController,
keyboardType: const TextInputType.numberWithOptions(
decimal: true,
),
decoration: const InputDecoration(
labelText: 'Budget amount',
hintText: 'e.g. 500',
border: OutlineInputBorder(),
isDense: true,
),
)
else
Row(
children: [
Expanded(
child: Text(
'Average |net| of last',
style: theme.textTheme.bodyMedium,
),
),
SizedBox(
width: 88,
child: DropdownButtonFormField<int>(
initialValue: budgetAverageMonths,
decoration: const InputDecoration(
border: OutlineInputBorder(),
isDense: true,
suffixText: 'mo',
),
items: [
for (final n in const [1, 2, 3, 6, 12, 24])
DropdownMenuItem(
value: n,
child: Text('$n'),
),
],
onChanged: (value) {
if (value == null) return;
setState(
() => budgetAverageMonths = value,
);
},
),
),
],
),
const SizedBox(height: 16),
Text('Chart', style: theme.textTheme.titleSmall),
const SizedBox(height: 8),
SegmentedButton<HomeWidgetChartStyle>(
segments: const [
ButtonSegment(
value: HomeWidgetChartStyle.bar,
label: Text('Bar'),
icon: Icon(Icons.linear_scale),
),
ButtonSegment(
value: HomeWidgetChartStyle.pie,
label: Text('Pie'),
icon: Icon(Icons.pie_chart_outline),
),
ButtonSegment(
value: HomeWidgetChartStyle.ring,
label: Text('Ring'),
icon: Icon(Icons.donut_large),
),
],
selected: {chartStyle},
onSelectionChanged: (value) {
setState(() => chartStyle = value.first);
},
),
const SizedBox(height: 8),
Text(
'Progress uses this month’s net (|in − out|) for the '
'filter toward the cap.',
style: theme.textTheme.bodySmall?.copyWith(
color: theme.colorScheme.onSurfaceVariant,
),
),
],
],
),
CheckboxListTile(
contentPadding: EdgeInsets.zero,
title: const Text('Amount out'),
value: showOut,
onChanged: (value) =>
setState(() => showOut = value ?? false),
),
CheckboxListTile(
contentPadding: EdgeInsets.zero,
title: const Text('Number of transactions'),
value: showCount,
onChanged: (value) =>
setState(() => showCount = value ?? false),
),
SwitchListTile(
contentPadding: EdgeInsets.zero,
title: const Text('Half width'),
subtitle: const Text('Share the row with another widget'),
value: halfWidth,
onChanged: (value) => setState(() => halfWidth = value),
),
],
),
),
actions: [
TextButton(
@@ -133,9 +301,29 @@ Future<HomeFilterWidget?> _promptWidgetMetrics(
),
FilledButton(
onPressed: () {
if (!showIn && !showOut && !showCount) return;
if (type == HomeWidgetType.stats &&
!showIn &&
!showOut &&
!showCount) {
return;
}
var fixed = budgetFixedAmount;
if (type == HomeWidgetType.budget &&
budgetCapMode == HomeBudgetCapMode.fixed) {
final parsed = double.tryParse(
amountController.text.trim().replaceAll(',', '.'),
);
if (parsed == null || parsed <= 0) return;
fixed = parsed;
}
Navigator.of(context).pop(
draft.copyWith(
type: type,
iconId: iconId,
chartStyle: chartStyle,
budgetCapMode: budgetCapMode,
budgetFixedAmount: fixed,
budgetAverageMonths: budgetAverageMonths,
showAmountIn: showIn,
showAmountOut: showOut,
showCount: showCount,
@@ -150,7 +338,7 @@ Future<HomeFilterWidget?> _promptWidgetMetrics(
},
);
},
);
).whenComplete(amountController.dispose);
}
class _HomeWidgetsSheet extends StatelessWidget {
@@ -318,15 +506,21 @@ class _HomeWidgetsSheet extends StatelessWidget {
static String _subtitle(HomeFilterWidget w) {
final parts = <String>[
w.type == HomeWidgetType.budget ? 'Budget' : 'Stats',
if (w.type == HomeWidgetType.budget)
w.budgetCapMode == HomeBudgetCapMode.fixed
? 'Fixed'
: 'Avg ${w.budgetAverageMonths}mo',
if (w.type == HomeWidgetType.budget) w.chartStyle.name,
if (w.monthOnly) 'This month',
if (w.flow != TxFlowFilter.all) w.flow.name,
if (w.labelIds.isNotEmpty) '${w.labelIds.length} labels',
if (w.query.trim().isNotEmpty) '“${w.query.trim()}”',
if (w.showAmountIn) 'In',
if (w.showAmountOut) 'Out',
if (w.showCount) 'Count',
if (w.type == HomeWidgetType.stats && w.showAmountIn) 'In',
if (w.type == HomeWidgetType.stats && w.showAmountOut) 'Out',
if (w.type == HomeWidgetType.stats && w.showCount) 'Count',
if (w.halfWidth) 'Half',
];
return parts.isEmpty ? 'All transactions' : parts.join(' · ');
return parts.join(' · ');
}
}