design improvements

Frontend-user/lib/expand.dart

@@ -1,5 +1,7 @@
 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,14 +1,15 @@
 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
-  - 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 }
@@ -19,42 +20,42 @@ class Transaction {
   int betrag;
   Art art;
   DateTime datum;
-  String beschreibung;
-  bool elevated = true;
-  Transaction(this.art, this.betrag, this.datum, this.beschreibung);
+  String? beschreibung;
+  Transaction(this.art, this.betrag, this.datum, [this.beschreibung]);
 }
 
-class Finance extends StatefulWidget {
-  const Finance({super.key});
-
-  @override
-  State<Finance> createState() => _Finance();
-}
-
-class _Finance extends State<Finance> {
+//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.korrektur, 2332, now.subtract(const Duration(hours: 5)),
         'Korrektur des Warenkorbs')
   ];
 
+  Finance({super.key});
+
   @override
   Widget build(BuildContext context) {
     initializeDateFormatting('de_DE');
@@ -63,79 +64,98 @@ class _Finance extends State<Finance> {
         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,
-                      //color: Colors.black,
-                      //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: Colors.blue.withAlpha(30),
+                    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: () {
-                    transactions[index].elevated =
-                        !transactions[index].elevated;
-                    setState(() {});
-                    debugPrint('Card tapped');
-                  },
-                  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: [
-                            Row(
-                              children: [
-                                Text(DateFormat(
-                                        "EEEE, dd. MMMM yyyy HH:mm", 'de_DE')
-                                    .format(now)),
-                                Text(
-                                    '${transactions[index].art}:  ${transactions[index].betrag / 100}€'),
-                              ],
-                            ),
-                            Expand(
-                                expand: transactions[index].elevated,
-                                child: Text(transactions[index].beschreibung))
-                          ],
-                        ),
-                      ],
-                    ),
-                  ),
-                ),
-              );
+                          if (transactions[index].art == Art.einkauf) {
+                            showBottomSheet(
+                                context: context,
+                                builder: (BuildContext context) {
+                                  return const SizedBox.expand();
+                                });
+                          }
+                        }));
               } 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,10 +14,19 @@ 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(
-              seedColor: Colors.green)), //9bbee6 //79,128,104
-      darkTheme: ThemeData.dark(),
+              brightness: Brightness.light,
+              seedColor: const Color(0xff5f7c61))),
+      darkTheme: ThemeData(
+          useMaterial3: true,
+          brightness: Brightness.dark,
+          colorScheme: ColorScheme.fromSeed(
+            brightness: Brightness.dark,
+            seedColor: const Color(0xff5f7c61),
+          )),
       themeMode: ThemeMode.system,
       home: const MyHomePage(),
     );
@@ -72,9 +81,16 @@ class _MyHomePageState extends State<MyHomePage> {
           alignment: Alignment.center,
           child: Text('Page $test'),
         ),
-        const Finance(),
-        const Text(
-            'Hier könnten Einstellungen zu Darkmode mit shared_preferences und riverpod sein')
+        Finance(),
+        ListView(children: const <Widget>[
+          ListTile(
+            leading: Icon(Icons.dark_mode),
+            title: Text(
+              'Hier könnten Einstellungen zu Darkmode mit shared_preferences und riverpod sein',
+              maxLines: 2,
+            ),
+          )
+        ])
       ][currentPageIndex],
     );
   }