Frontend-user/lib/expand.dart

@@ -1,7 +1,5 @@
 import 'package:flutter/material.dart';
 
-//this was used in a earlier version of the app and will possibly be removed in future versions.
-
 class Expand extends StatefulWidget {
   final Widget child;
   final bool expand;

Frontend-user/lib/finance.dart

@@ -1,15 +1,14 @@
 import 'package:flutter/material.dart';
 import 'package:intl/intl.dart';
 import 'package:intl/date_symbol_data_local.dart';
+import 'expand.dart';
 
 /*
 todo:
+  - Design, Farbschema, Darkmode
   - Einkauf und Settings
-  - Warenkorb
+  - Details zum Warenkorb und Beschreibung (https://stackoverflow.com/questions/49029841/how-to-animate-collapse-elements-in-flutter)
-  - Aufladungen?
   - farbliche Hervorhebungen
-  - semanticLabels, Screenreader
-  - monatliche Aufladung: ausstehende Beträge
 */
 
 enum Art { monatlBeitrag, aufladung, einkauf, korrektur }
@@ -20,142 +19,123 @@ class Transaction {
   int betrag;
   Art art;
   DateTime datum;
-  String? beschreibung;
+  String beschreibung;
-  Transaction(this.art, this.betrag, this.datum, [this.beschreibung]);
+  bool elevated = true;
+  Transaction(this.art, this.betrag, this.datum, this.beschreibung);
 }
 
-//sample data
+class Finance extends StatefulWidget {
-class Finance extends StatelessWidget {
+  const Finance({super.key});
+
+  @override
+  State<Finance> createState() => _Finance();
+}
+
+class _Finance extends State<Finance> {
   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)),
         '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)),
         '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)),
         '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)),
-        '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.korrektur, 2332, now.subtract(const Duration(hours: 5)),
         'Korrektur des Warenkorbs')
   ];
 
-  Finance({super.key});
-
   @override
   Widget build(BuildContext context) {
     initializeDateFormatting('de_DE');
 
     return Scaffold(
         appBar: AppBar(
-          toolbarHeight: 75,
+            toolbarHeight: 75,
-          title: const Card(
+            title: const Card(
-            child: ListTile(
+              child: Padding(
-                leading: Icon(
+                padding: EdgeInsets.all(8.0),
-                  Icons.euro,
+                child: Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    Icon(
+                      Icons.euro,
+                      //color: Colors.black,
+                      //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(
-            itemCount: null,
+          itemCount: null,
-            itemBuilder: (context, index) {
+          itemBuilder: (context, index) {
-              if (index < transactions.length) {
+            if (index < transactions.length) {
-                return Card(
+              return Card(
-                    child: ListTile(
+                clipBehavior: Clip.hardEdge,
-                        leading: getIcon(transactions[index].art),
+                child: InkWell(
-                        title: Text(gettitle(transactions[index].art)),
+                  splashColor: Colors.blue.withAlpha(30),
-                        subtitle: getSubtitle(index),
+                  onTap: () {
-                        trailing: transactions[index].art == Art.einkauf
+                    transactions[index].elevated =
-                            ? PopupMenuButton(
+                        !transactions[index].elevated;
-                                onSelected: (value) {},
+                    setState(() {});
-                                itemBuilder: (BuildContext context) =>
+                    debugPrint('Card tapped');
-                                    <PopupMenuEntry<String>>[
+                  },
-                                  const PopupMenuItem<String>(
+                  child: Padding(
-                                    value: 'Option',
+                    padding: const EdgeInsets.all(8.0),
-                                    child: ListTile(
+                    child: Row(
-                                        leading: Icon(Icons.manage_history),
+                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-                                        title: Text('Warenkorb bearbeiten')),
+                      children: [
-                                  ),
+                        Icon(transactions[index].art == Art.korrektur
-                                  const PopupMenuItem<String>(
+                            ? Icons.error
-                                    value: 'Option',
+                            : Icons.money),
-                                    child: ListTile(
+                        Column(
-                                        leading:
+                          children: [
-                                            Icon(Icons.remove_shopping_cart),
+                            Row(
-                                        title: Text('Einkauf stornieren')),
+                              children: [
-                                  ),
+                                Text(DateFormat(
-                                ],
+                                        "EEEE, dd. MMMM yyyy HH:mm", 'de_DE')
-                              )
+                                    .format(now)),
-                            : null,
+                                Text(
-                        onTap: () {
+                                    '${transactions[index].art}:  ${transactions[index].betrag / 100}€'),
-                          if (transactions[index].art == Art.einkauf) {
+                              ],
-                            showBottomSheet(
+                            ),
-                                context: context,
+                            Expand(
-                                builder: (BuildContext context) {
+                                expand: transactions[index].elevated,
-                                  return const SizedBox.expand();
+                                child: Text(transactions[index].beschreibung))
-                                });
+                          ],
-                          }
+                        ),
-                        }));
+                      ],
-              } 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);
-  }
-
-  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);
-    }
   }
 }

Frontend-user/lib/main.dart

@@ -14,19 +14,10 @@ class MyApp extends StatelessWidget {
       title: 'SoNaKo Demo App',
       debugShowCheckedModeBanner: false,
       theme: ThemeData(
-          //darkgreen:5f7c61, mediumgreen: 66906a, lightgreen: 9cbe96, yellow: f5de64
           useMaterial3: true,
-          brightness: Brightness.light,
           colorScheme: ColorScheme.fromSeed(
-              brightness: Brightness.light,
+              seedColor: Colors.green)), //9bbee6 //79,128,104
-              seedColor: const Color(0xff5f7c61))),
+      darkTheme: ThemeData.dark(),
-      darkTheme: ThemeData(
-          useMaterial3: true,
-          brightness: Brightness.dark,
-          colorScheme: ColorScheme.fromSeed(
-            brightness: Brightness.dark,
-            seedColor: const Color(0xff5f7c61),
-          )),
       themeMode: ThemeMode.system,
       home: const MyHomePage(),
     );
@@ -81,16 +72,9 @@ class _MyHomePageState extends State<MyHomePage> {
           alignment: Alignment.center,
           child: Text('Page $test'),
         ),
-        Finance(),
+        const Finance(),
-        ListView(children: const <Widget>[
+        const Text(
-          ListTile(
+            'Hier könnten Einstellungen zu Darkmode mit shared_preferences und riverpod sein')
-            leading: Icon(Icons.dark_mode),
-            title: Text(
-              'Hier könnten Einstellungen zu Darkmode mit shared_preferences und riverpod sein',
-              maxLines: 2,
-            ),
-          )
-        ])
       ][currentPageIndex],
     );
   }