Flutterapps/dragon_ledger
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat: Macht die Trend-Seite funktional

Browse Source
This commit is contained in:
DragonSlayer_14
2026-01-01 17:05:10 +01:00
parent fcdc820c74
commit d3804865d8
7 changed files with 469 additions and 327 deletions
Download Patch File Download Diff File Expand all files Collapse all files

358
lib/Pages/Trend/trend.dart
View File

@@ -1,10 +1,10 @@
import 'dart:math';
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:flutter_sticky_header/flutter_sticky_header.dart';
import 'package:routemaster/routemaster.dart';
import '../Misc/monthly_balance_chart.dart';
import 'input_fields.dart';
import 'transaction_list.dart';
/// Eine Seite, die den Trend von Transaktionen zeigt.
///
/// Die Seite zeigt einen Liniendiagramm für den Kontostand über die Zeit,
@@ -19,153 +19,17 @@ class Trend extends StatefulWidget {
}
class _TrendState extends State<Trend> {
final Map<String, double> monthlyBalance = <String, double>{
for (int i in List<int>.generate(24, (final int i) => i + 1))
'M${i + 1}': Random().nextDouble() * 2000 + 500,
};
final List<Map<String, Object>> transactions =
List<Map<String, Object>>.generate(
50,
(final int i) => <String, Object>{
'date': DateTime.now().subtract(Duration(days: i)),
'name': 'Transaction ${i + 1}',
'amount': (Random().nextDouble() * 2000 - 1000),
},
);
late TextEditingController nameController;
late TextEditingController minController;
late TextEditingController maxController;
DateTimeRange? selectedRange;
bool _initialized = false;
@override
void didChangeDependencies() {
super.didChangeDependencies();
if (!_initialized) {
final Map<String, String> query = Routemaster.of(
context,
).currentRoute.queryParameters;
nameController = TextEditingController(text: query['name'] ?? '');
minController = TextEditingController(text: query['min'] ?? '');
maxController = TextEditingController(text: query['max'] ?? '');
if (query['start'] != null && query['end'] != null) {
final DateTime? start = DateTime.tryParse(query['start']!);
final DateTime? end = DateTime.tryParse(query['end']!);
if (start != null && end != null) {
selectedRange = DateTimeRange(start: start, end: end);
}
} else {
selectedRange = null;
}
_initialized = true;
}
}
@override
void dispose() {
nameController.dispose();
minController.dispose();
maxController.dispose();
super.dispose();
}
Future<void> _pickDateRange() async {
final now = DateTime.now();
final DateTimeRange<DateTime>? picked = await showDateRangePicker(
context: context,
firstDate: DateTime(now.year - 5),
lastDate: DateTime(now.year + 1),
initialDateRange: selectedRange,
);
if (picked != null) {
setState(() => selectedRange = picked);
_updateUrl();
}
}
void _updateUrl() {
final params = <String, String>{
if (nameController.text.isNotEmpty) 'name': nameController.text,
if (minController.text.isNotEmpty) 'min': minController.text,
if (maxController.text.isNotEmpty) 'max': maxController.text,
if (selectedRange != null)
'start': selectedRange!.start.toIso8601String(),
if (selectedRange != null) 'end': selectedRange!.end.toIso8601String(),
};
Routemaster.of(context).replace('/trend', queryParameters: params);
setState(() {});
}
String _monthName(final int month) {
const names = <String>[
'',
'Januar',
'Februar',
'März',
'April',
'Mai',
'Juni',
'Juli',
'August',
'September',
'Oktober',
'November',
'Dezember',
];
return names[month];
}
@override
Widget build(final BuildContext context) {
final ThemeData theme = Theme.of(context);
final Map<String, String> query = Routemaster.of(
context,
).currentRoute.queryParameters;
final String searchName = query['name'] ?? '';
final double? minAmount = double.tryParse(query['min'] ?? '');
final double? maxAmount = double.tryParse(query['max'] ?? '');
final List<Map<String, Object>> filteredTransactions =
transactions.where((final Map<String, Object> tx) {
final date = tx['date']! as DateTime;
var rangeMatch = true;
if (selectedRange != null) {
rangeMatch =
!date.isBefore(selectedRange!.start) &&
!date.isAfter(selectedRange!.end);
}
final bool nameMatch =
searchName.isEmpty ||
((tx['name'] ?? '') as String).contains(searchName);
final amount = (tx['amount'] ?? 0) as double;
final bool amountMatch =
(minAmount == null || amount >= minAmount) &&
(maxAmount == null || amount <= maxAmount);
return rangeMatch && nameMatch && amountMatch;
}).toList()..sort(
(final Map<String, Object> a, final Map<String, Object> b) =>
(b['date']! as DateTime).compareTo(a['date']! as DateTime),
);
final transactionsByMonth = <String, List<Map<String, Object>>>{};
for (final tx in filteredTransactions) {
final date = tx['date']! as DateTime;
final monthName = '${_monthName(date.month)} ${date.year}';
transactionsByMonth
.putIfAbsent(monthName, () => <Map<String, Object>>[])
.add(tx);
}
final String? name = query['name'];
final double? amountMin = double.tryParse(query['amountMin'] ?? '');
final double? amountMax = double.tryParse(query['amountMax'] ?? '');
final DateTime? dateFrom = DateTime.tryParse(query['dateFrom'] ?? '');
final DateTime? dateTo = DateTime.tryParse(query['dateTo'] ?? '');
return Scaffold(
body: SafeArea(
@@ -174,10 +38,29 @@ class _TrendState extends State<Trend> {
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
_inputFields(theme),
InputFields(
name: name,
amountMin: amountMin,
amountMax: amountMax,
dateFrom: dateFrom,
dateTo: dateTo,
onChanged: () {
setState(() {});
},
),
const SizedBox(height: 24),
_lineChart(theme),
MonthlyBalanceChart(
name: name,
amountMin: amountMin,
amountMax: amountMax,
dateFrom: (dateFrom != null)
? DateTime(dateFrom.year, dateFrom.month, dateFrom.day - 1)
: null,
dateTo: (dateTo != null)
? DateTime(dateTo.year, dateTo.month, dateTo.day + 1)
: null,
),
const SizedBox(height: 24),
const Text(
@@ -185,180 +68,21 @@ class _TrendState extends State<Trend> {
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
const SizedBox(height: 12),
_transactions(theme, transactionsByMonth),
TransactionList(
name: name,
amountMin: amountMin,
amountMax: amountMax,
dateFrom: (dateFrom != null)
? DateTime(dateFrom.year, dateFrom.month, dateFrom.day - 1)
: null,
dateTo: (dateTo != null)
? DateTime(dateTo.year, dateTo.month, dateTo.day + 1)
: null,
),
],
),
),
),
);
}
Widget _inputFields(final ThemeData theme) => Row(
children: <Widget>[
Expanded(
child: TextField(
controller: nameController,
decoration: const InputDecoration(
labelText: 'Name',
border: OutlineInputBorder(),
),
onChanged: (_) => _updateUrl(),
),
),
const SizedBox(width: 8),
Expanded(
child: TextField(
controller: minController,
decoration: const InputDecoration(
labelText: 'Min Betrag',
border: OutlineInputBorder(),
),
keyboardType: const TextInputType.numberWithOptions(decimal: true),
onChanged: (_) => _updateUrl(),
),
),
const SizedBox(width: 8),
Expanded(
child: TextField(
controller: maxController,
decoration: const InputDecoration(
labelText: 'Max Betrag',
border: OutlineInputBorder(),
),
keyboardType: const TextInputType.numberWithOptions(decimal: true),
onChanged: (_) => _updateUrl(),
),
),
const SizedBox(width: 8),
Expanded(
child: TextField(
readOnly: true,
controller: TextEditingController(
text: selectedRange != null
? '${selectedRange!.start.day}.${selectedRange!.start.month}.${selectedRange!.start.year} - ${selectedRange!.end.day}.${selectedRange!.end.month}.${selectedRange!.end.year}'
: '',
),
decoration: InputDecoration(
labelText: 'Zeitraum',
border: const OutlineInputBorder(),
suffixIcon: Icon(
Icons.calendar_month,
color: theme.colorScheme.onSurface,
),
),
onTap: _pickDateRange,
),
),
],
);
Widget _lineChart(final ThemeData theme) => SizedBox(
height: 180,
child: LineChart(
LineChartData(
minY: 0,
maxY:
monthlyBalance.values.reduce(
(final double a, final double b) => a > b ? a : b,
) +
500,
titlesData: FlTitlesData(
topTitles: const AxisTitles(),
rightTitles: const AxisTitles(),
bottomTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
reservedSize: 28,
interval: 1,
getTitlesWidget: (final double value, final TitleMeta meta) {
final List<String> months = monthlyBalance.keys.toList();
if (value.toInt() >= 0 && value.toInt() < months.length) {
return Text(
months[value.toInt()],
style: theme.textTheme.bodySmall,
);
}
return const Text('');
},
),
),
leftTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
reservedSize: 50,
interval: 500,
getTitlesWidget: (final double value, final TitleMeta meta) =>
Text('${value.toInt()} €', style: theme.textTheme.bodySmall),
),
),
),
lineBarsData: <LineChartBarData>[
LineChartBarData(
spots: List<FlSpot>.generate(
monthlyBalance.length,
(final int i) =>
FlSpot(i.toDouble(), monthlyBalance.values.elementAt(i)),
),
isCurved: true,
barWidth: 3,
color: theme.colorScheme.primary,
),
],
),
),
);
Widget _transactions(
final ThemeData theme,
final Map<String, List<Map<String, Object>>> transactionsByMonth,
) => Expanded(
child: CustomScrollView(
slivers: transactionsByMonth.entries
.map(
(final MapEntry<String, List<Map<String, Object>>> entry) =>
SliverStickyHeader(
header: Container(
color: theme.colorScheme.surface,
padding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 8,
),
alignment: Alignment.centerLeft,
child: Text(
entry.key,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
),
sliver: SliverList(
delegate: SliverChildBuilderDelegate((
final BuildContext context,
final int index,
) {
final Map<String, Object> tx = entry.value[index];
final amount = (tx['amount'] ?? 0) as double;
final date = tx['date']! as DateTime;
return ListTile(
contentPadding: EdgeInsets.zero,
title: Text((tx['name'] ?? '') as String),
subtitle: Text(
'${date.day}.${date.month}.${date.year}',
),
trailing: Text(
'${amount.toStringAsFixed(2)} €',
style: TextStyle(
color: amount >= 0 ? Colors.green : Colors.red,
fontWeight: FontWeight.bold,
),
),
);
}, childCount: entry.value.length),
),
),
)
.toList(),
),
);
}