changed design of the finance tab

This commit is contained in:
esche 2023-06-19 19:37:06 +02:00
parent 893b421fe3
commit f083ab8cf0

View file

@ -4,10 +4,12 @@ import 'package:intl/date_symbol_data_local.dart';
/* /*
todo: todo:
- Design, Darkmode
- Einkauf und Settings - Einkauf und Settings
- Details zum Warenkorb und Beschreibung (https://stackoverflow.com/questions/49029841/how-to-animate-collapse-elements-in-flutter) - Warenkorb
- Aufladungen?
- farbliche Hervorhebungen - farbliche Hervorhebungen
- semanticLabels, Screenreader
- monatliche Aufladung: ausstehende Beträge
*/ */
enum Art { monatlBeitrag, aufladung, einkauf, korrektur } enum Art { monatlBeitrag, aufladung, einkauf, korrektur }
@ -18,36 +20,36 @@ class Transaction {
int betrag; int betrag;
Art art; Art art;
DateTime datum; DateTime datum;
String beschreibung; String? beschreibung;
Transaction(this.art, this.betrag, this.datum, this.beschreibung); Transaction(this.art, this.betrag, this.datum, [this.beschreibung]);
} }
//sample data //sample data
class Finance extends StatelessWidget { class Finance extends StatelessWidget {
final List<Transaction> transactions = [ final List<Transaction> transactions = [
Transaction(Art.monatlBeitrag, 0, now, ''), Transaction(Art.monatlBeitrag, 0, now),
Transaction(Art.aufladung, 2042, now, ''), Transaction(Art.aufladung, 2042, now),
Transaction(Art.einkauf, -2442, now.subtract(const Duration(days: 2)), ''), Transaction(Art.einkauf, -2442, now.subtract(const Duration(days: 2))),
Transaction(Art.korrektur, 2332, now.subtract(const Duration(hours: 5)), Transaction(Art.korrektur, 2332, now.subtract(const Duration(hours: 5)),
'Korrektur des Warenkorbs'), 'Korrektur des Warenkorbs'),
Transaction(Art.monatlBeitrag, 0, now, ''), Transaction(Art.monatlBeitrag, 0, now),
Transaction(Art.aufladung, 2042, now, ''), Transaction(Art.aufladung, 2042, now),
Transaction(Art.einkauf, -2442, now.subtract(const Duration(days: 2)), ''), Transaction(Art.einkauf, -2442, now.subtract(const Duration(days: 2))),
Transaction(Art.korrektur, 2332, now.subtract(const Duration(hours: 5)), Transaction(Art.korrektur, 2332, now.subtract(const Duration(hours: 5)),
'Korrektur des Warenkorbs'), 'Korrektur des Warenkorbs'),
Transaction(Art.monatlBeitrag, 0, now, ''), Transaction(Art.monatlBeitrag, 0, now),
Transaction(Art.aufladung, 2042, now, ''), Transaction(Art.aufladung, 2042, now),
Transaction(Art.einkauf, -2442, now.subtract(const Duration(days: 2)), ''), Transaction(Art.einkauf, -2442, now.subtract(const Duration(days: 2))),
Transaction(Art.korrektur, 2332, now.subtract(const Duration(hours: 5)), Transaction(Art.korrektur, 2332, now.subtract(const Duration(hours: 5)),
'Korrektur des Warenkorbs'), 'Korrektur des Warenkorbs'),
Transaction(Art.monatlBeitrag, 0, now, ''), Transaction(Art.monatlBeitrag, 0, now),
Transaction(Art.aufladung, 2042, now, ''), Transaction(Art.aufladung, 2042, now),
Transaction(Art.einkauf, -2442, now.subtract(const Duration(days: 2)), ''), Transaction(Art.einkauf, -2442, now.subtract(const Duration(days: 2))),
Transaction(Art.korrektur, 2332, now.subtract(const Duration(hours: 5)), Transaction(Art.korrektur, 2332, now.subtract(const Duration(hours: 5)),
'Korrektur des Warenkorbs'), 'Korrektur des Warenkorbs'),
Transaction(Art.monatlBeitrag, 0, now, ''), Transaction(Art.monatlBeitrag, 0, now),
Transaction(Art.aufladung, 2042, now, ''), Transaction(Art.aufladung, 2042, now),
Transaction(Art.einkauf, -2442, now.subtract(const Duration(days: 2)), ''), Transaction(Art.einkauf, -2442, now.subtract(const Duration(days: 2))),
Transaction(Art.korrektur, 2332, now.subtract(const Duration(hours: 5)), Transaction(Art.korrektur, 2332, now.subtract(const Duration(hours: 5)),
'Korrektur des Warenkorbs') 'Korrektur des Warenkorbs')
]; ];
@ -60,75 +62,102 @@ class Finance extends StatelessWidget {
return Scaffold( return Scaffold(
appBar: AppBar( appBar: AppBar(
toolbarHeight: 75, toolbarHeight: 75,
title: const Card( title: const Card(
child: Padding( child: ListTile(
padding: EdgeInsets.all(8.0), leading: Icon(
child: Row( Icons.euro,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(
Icons.euro,
//semanticLabel: 'Text for screenreader',
),
Column(
children: [
Text(
'Aktuelles Guthaben:',
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
'-00,34€',
style: TextStyle(fontWeight: FontWeight.bold),
)
],
)
],
), ),
), title: Text(
)), 'Aktuelles Guthaben:',
),
subtitle: Text(
'-00,34€',
)),
),
),
body: ListView.builder( body: ListView.builder(
itemCount: null, itemCount: null,
itemBuilder: (context, index) { itemBuilder: (context, index) {
if (index < transactions.length) { if (index < transactions.length) {
return Card( return Card(
clipBehavior: Clip.hardEdge, child: ListTile(
child: InkWell( leading: getIcon(transactions[index].art),
splashColor: const Color(0xff5f7c61).withAlpha(50), title: Text(gettitle(transactions[index].art)),
onTap: () { subtitle: getSubtitle(index),
showBottomSheet( trailing: transactions[index].art == Art.einkauf
context: context, ? PopupMenuButton(
builder: (BuildContext context) { onSelected: (value) {},
return SizedBox.expand( itemBuilder: (BuildContext context) =>
child: Text(transactions[index].beschreibung)); <PopupMenuEntry<String>>[
}); const PopupMenuItem<String>(
}, value: 'Option',
child: Padding( child: ListTile(
padding: const EdgeInsets.all(8.0), leading: Icon(Icons.manage_history),
child: Row( title: Text('Warenkorb bearbeiten')),
mainAxisAlignment: MainAxisAlignment.spaceEvenly, ),
children: [ const PopupMenuItem<String>(
Icon(transactions[index].art == Art.korrektur value: 'Option',
? Icons.error child: ListTile(
: Icons.money), leading:
Column( Icon(Icons.remove_shopping_cart),
children: [ title: Text('Einkauf stornieren')),
Text( ),
DateFormat("EEEE, dd. MMMM yyyy HH:mm", 'de_DE') ],
.format(now)), )
Text( : null,
'${transactions[index].art}: ${transactions[index].betrag / 100}') onTap: () {
], if (transactions[index].art == Art.einkauf) {
), showBottomSheet(
], context: context,
), builder: (BuildContext context) {
), return const SizedBox.expand();
), });
); }
} else { }));
return null; } else {
} return null;
}, }
)); }));
}
String gettitle(Art art) {
switch (art) {
case Art.aufladung:
return 'Aufladung';
case Art.einkauf:
return 'Einkauf';
case Art.korrektur:
return 'Korrektur';
case Art.monatlBeitrag:
return 'monatlicher Beitrag';
}
}
Text getSubtitle(int index) {
String text = '${transactions[index].betrag / 100}';
text += '';
text += DateFormat("EEEE, dd. MMMM yyyy HH:mm", 'de_DE')
.format(transactions[index].datum);
if (transactions[index].beschreibung != null) {
(text += '\n${transactions[index].beschreibung}');
}
return Text(text);
//return Text(
// '${DateFormat("EEEE, dd. MMMM yyyy HH:mm", 'de_DE').format(transactions[index].datum)}: ${transactions[index].betrag / 100}\n${transactions[index].beschreibung}');
}
Icon getIcon(Art art) {
switch (art) {
case Art.aufladung:
return const Icon(Icons.savings);
case Art.einkauf:
return const Icon(Icons.shopping_basket);
case Art.korrektur:
return const Icon(Icons.priority_high);
case Art.monatlBeitrag:
return const Icon(Icons.payment);
}
} }
} }