changed design of the finance tab
This commit is contained in:
parent
893b421fe3
commit
f083ab8cf0
1 changed files with 116 additions and 87 deletions
|
|
@ -4,10 +4,12 @@ import 'package:intl/date_symbol_data_local.dart';
|
|||
|
||||
/*
|
||||
todo:
|
||||
- Design, Darkmode
|
||||
- Einkauf und Settings
|
||||
- Details zum Warenkorb und Beschreibung (https://stackoverflow.com/questions/49029841/how-to-animate-collapse-elements-in-flutter)
|
||||
- Warenkorb
|
||||
- Aufladungen?
|
||||
- farbliche Hervorhebungen
|
||||
- semanticLabels, Screenreader
|
||||
- monatliche Aufladung: ausstehende Beträge
|
||||
*/
|
||||
|
||||
enum Art { monatlBeitrag, aufladung, einkauf, korrektur }
|
||||
|
|
@ -18,36 +20,36 @@ class Transaction {
|
|||
int betrag;
|
||||
Art art;
|
||||
DateTime datum;
|
||||
String beschreibung;
|
||||
Transaction(this.art, this.betrag, this.datum, this.beschreibung);
|
||||
String? beschreibung;
|
||||
Transaction(this.art, this.betrag, this.datum, [this.beschreibung]);
|
||||
}
|
||||
|
||||
//sample data
|
||||
class Finance extends StatelessWidget {
|
||||
final List<Transaction> transactions = [
|
||||
Transaction(Art.monatlBeitrag, 0, now, ''),
|
||||
Transaction(Art.aufladung, 2042, now, ''),
|
||||
Transaction(Art.einkauf, -2442, now.subtract(const Duration(days: 2)), ''),
|
||||
Transaction(Art.monatlBeitrag, 0, now),
|
||||
Transaction(Art.aufladung, 2042, now),
|
||||
Transaction(Art.einkauf, -2442, now.subtract(const Duration(days: 2))),
|
||||
Transaction(Art.korrektur, 2332, now.subtract(const Duration(hours: 5)),
|
||||
'Korrektur des Warenkorbs'),
|
||||
Transaction(Art.monatlBeitrag, 0, now, ''),
|
||||
Transaction(Art.aufladung, 2042, now, ''),
|
||||
Transaction(Art.einkauf, -2442, now.subtract(const Duration(days: 2)), ''),
|
||||
Transaction(Art.monatlBeitrag, 0, now),
|
||||
Transaction(Art.aufladung, 2042, now),
|
||||
Transaction(Art.einkauf, -2442, now.subtract(const Duration(days: 2))),
|
||||
Transaction(Art.korrektur, 2332, now.subtract(const Duration(hours: 5)),
|
||||
'Korrektur des Warenkorbs'),
|
||||
Transaction(Art.monatlBeitrag, 0, now, ''),
|
||||
Transaction(Art.aufladung, 2042, now, ''),
|
||||
Transaction(Art.einkauf, -2442, now.subtract(const Duration(days: 2)), ''),
|
||||
Transaction(Art.monatlBeitrag, 0, now),
|
||||
Transaction(Art.aufladung, 2042, now),
|
||||
Transaction(Art.einkauf, -2442, now.subtract(const Duration(days: 2))),
|
||||
Transaction(Art.korrektur, 2332, now.subtract(const Duration(hours: 5)),
|
||||
'Korrektur des Warenkorbs'),
|
||||
Transaction(Art.monatlBeitrag, 0, now, ''),
|
||||
Transaction(Art.aufladung, 2042, now, ''),
|
||||
Transaction(Art.einkauf, -2442, now.subtract(const Duration(days: 2)), ''),
|
||||
Transaction(Art.monatlBeitrag, 0, now),
|
||||
Transaction(Art.aufladung, 2042, now),
|
||||
Transaction(Art.einkauf, -2442, now.subtract(const Duration(days: 2))),
|
||||
Transaction(Art.korrektur, 2332, now.subtract(const Duration(hours: 5)),
|
||||
'Korrektur des Warenkorbs'),
|
||||
Transaction(Art.monatlBeitrag, 0, now, ''),
|
||||
Transaction(Art.aufladung, 2042, now, ''),
|
||||
Transaction(Art.einkauf, -2442, now.subtract(const Duration(days: 2)), ''),
|
||||
Transaction(Art.monatlBeitrag, 0, now),
|
||||
Transaction(Art.aufladung, 2042, now),
|
||||
Transaction(Art.einkauf, -2442, now.subtract(const Duration(days: 2))),
|
||||
Transaction(Art.korrektur, 2332, now.subtract(const Duration(hours: 5)),
|
||||
'Korrektur des Warenkorbs')
|
||||
];
|
||||
|
|
@ -62,73 +64,100 @@ class Finance extends StatelessWidget {
|
|||
appBar: AppBar(
|
||||
toolbarHeight: 75,
|
||||
title: const Card(
|
||||
child: Padding(
|
||||
padding: EdgeInsets.all(8.0),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Icon(
|
||||
child: ListTile(
|
||||
leading: Icon(
|
||||
Icons.euro,
|
||||
//semanticLabel: 'Text for screenreader',
|
||||
),
|
||||
Column(
|
||||
children: [
|
||||
Text(
|
||||
title: Text(
|
||||
'Aktuelles Guthaben:',
|
||||
style: TextStyle(fontWeight: FontWeight.bold),
|
||||
),
|
||||
Text(
|
||||
subtitle: Text(
|
||||
'-00,34€',
|
||||
style: TextStyle(fontWeight: FontWeight.bold),
|
||||
)
|
||||
],
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
)),
|
||||
),
|
||||
),
|
||||
body: ListView.builder(
|
||||
itemCount: null,
|
||||
itemBuilder: (context, index) {
|
||||
if (index < transactions.length) {
|
||||
return Card(
|
||||
clipBehavior: Clip.hardEdge,
|
||||
child: InkWell(
|
||||
splashColor: const Color(0xff5f7c61).withAlpha(50),
|
||||
child: ListTile(
|
||||
leading: getIcon(transactions[index].art),
|
||||
title: Text(gettitle(transactions[index].art)),
|
||||
subtitle: getSubtitle(index),
|
||||
trailing: transactions[index].art == Art.einkauf
|
||||
? PopupMenuButton(
|
||||
onSelected: (value) {},
|
||||
itemBuilder: (BuildContext context) =>
|
||||
<PopupMenuEntry<String>>[
|
||||
const PopupMenuItem<String>(
|
||||
value: 'Option',
|
||||
child: ListTile(
|
||||
leading: Icon(Icons.manage_history),
|
||||
title: Text('Warenkorb bearbeiten')),
|
||||
),
|
||||
const PopupMenuItem<String>(
|
||||
value: 'Option',
|
||||
child: ListTile(
|
||||
leading:
|
||||
Icon(Icons.remove_shopping_cart),
|
||||
title: Text('Einkauf stornieren')),
|
||||
),
|
||||
],
|
||||
)
|
||||
: null,
|
||||
onTap: () {
|
||||
if (transactions[index].art == Art.einkauf) {
|
||||
showBottomSheet(
|
||||
context: context,
|
||||
builder: (BuildContext context) {
|
||||
return SizedBox.expand(
|
||||
child: Text(transactions[index].beschreibung));
|
||||
return const SizedBox.expand();
|
||||
});
|
||||
},
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
children: [
|
||||
Icon(transactions[index].art == Art.korrektur
|
||||
? Icons.error
|
||||
: Icons.money),
|
||||
Column(
|
||||
children: [
|
||||
Text(
|
||||
DateFormat("EEEE, dd. MMMM yyyy HH:mm", 'de_DE')
|
||||
.format(now)),
|
||||
Text(
|
||||
'${transactions[index].art}: ${transactions[index].betrag / 100}€')
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}));
|
||||
} 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue