Frontend-user/lib/expand.dart

@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+
+class Expand extends StatefulWidget {
+  final Widget child;
+  final bool expand;
+  const Expand({super.key, this.expand = true, required this.child});
+
+  @override
+  State<Expand> createState() => _ExpandState();
+}
+
+class _ExpandState extends State<Expand> with SingleTickerProviderStateMixin {
+  late AnimationController expandController;
+  late Animation<double> animation;
+
+  @override
+  void initState() {
+    super.initState();
+    prepareAnimations();
+    _runExpandCheck();
+  }
+
+  ///Setting up the animation
+  void prepareAnimations() {
+    expandController = AnimationController(
+        vsync: this, duration: const Duration(milliseconds: 500));
+    animation = CurvedAnimation(
+      parent: expandController,
+      curve: Curves.fastOutSlowIn,
+    );
+  }
+
+  void _runExpandCheck() {
+    if (widget.expand) {
+      expandController.forward();
+    } else {
+      expandController.reverse();
+    }
+  }
+
+  @override
+  void didUpdateWidget(Expand oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    _runExpandCheck();
+  }
+
+  @override
+  void dispose() {
+    expandController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return SizeTransition(
+        axisAlignment: 1.0, sizeFactor: animation, child: widget.child);
+  }
+}

Frontend-user/lib/finance.dart

@@ -1,11 +1,13 @@
 import 'package:flutter/material.dart';
 import 'package:intl/intl.dart';
 import 'package:intl/date_symbol_data_local.dart';
+import 'expand.dart';
 
 /*
 todo:
-  - Design
-  - Details zum Warenkorb und Beschreibung (Popup?)
+  - Design, Farbschema, Darkmode
+  - Einkauf und Settings
+  - Details zum Warenkorb und Beschreibung (https://stackoverflow.com/questions/49029841/how-to-animate-collapse-elements-in-flutter)
   - farbliche Hervorhebungen
 */
 
@@ -18,16 +20,37 @@ class Transaction {
   Art art;
   DateTime datum;
   String beschreibung;
+  bool elevated = true;
   Transaction(this.art, this.betrag, this.datum, this.beschreibung);
 }
 
-class Finance extends StatelessWidget {
-  Finance({super.key});
+class Finance extends StatefulWidget {
+  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.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'),
+    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')
   ];
@@ -36,68 +59,83 @@ class Finance extends StatelessWidget {
   Widget build(BuildContext context) {
     initializeDateFormatting('de_DE');
 
-    return ListView.builder(
-      itemCount: null,
-      itemBuilder: (context, index) {
-        if (index == 0) {
-          return const Card(
-            child: Padding(
-              padding: EdgeInsets.all(8.0),
-              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),
-                      )
-                    ],
-                  )
-                ],
+    return Scaffold(
+        appBar: AppBar(
+            toolbarHeight: 75,
+            title: const Card(
+              child: Padding(
+                padding: EdgeInsets.all(8.0),
+                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),
+                        )
+                      ],
+                    )
+                  ],
+                ),
               ),
-            ),
-          );
-        } else if (index <= transactions.length) {
-          return Card(
-            child: Padding(
-              padding: const EdgeInsets.all(8.0),
-              child: Row(
-                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-                children: [
-                  Icon(transactions[index - 1].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 - 1].art}:  ${transactions[index - 1].betrag / 100}€'),
-                        ],
-                      ),
-                      Text(transactions[index - 1].beschreibung)
-                    ],
+            )),
+        body: ListView.builder(
+          itemCount: null,
+          itemBuilder: (context, index) {
+            if (index < transactions.length) {
+              return Card(
+                clipBehavior: Clip.hardEdge,
+                child: InkWell(
+                  splashColor: Colors.blue.withAlpha(30),
+                  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))
+                          ],
+                        ),
+                      ],
+                    ),
                   ),
-                ],
-              ),
-            ),
-          );
-        } else {
-          return null;
-        }
-      },
-    );
+                ),
+              );
+            } else {
+              return null;
+            }
+          },
+        ));
   }
 }

Frontend-user/lib/main.dart

@@ -39,6 +39,8 @@ class _MyHomePageState extends State<MyHomePage> {
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
+        leading:
+            const Image(image: AssetImage('assets/logo_sonako_4c_optimal.png')),
         title: const Text('SoNaKo Demo App'),
       ),
       bottomNavigationBar: NavigationBar(
@@ -70,7 +72,7 @@ class _MyHomePageState extends State<MyHomePage> {
           alignment: Alignment.center,
           child: Text('Page $test'),
         ),
-        Finance(),
+        const Finance(),
         const Text(
             'Hier könnten Einstellungen zu Darkmode mit shared_preferences und riverpod sein')
       ][currentPageIndex],

Frontend-user/pubspec.yaml

@@ -60,9 +60,8 @@ flutter:
   uses-material-design: true
 
   # To add assets to your application, add an assets section, like this:
-  # assets:
-  #   - images/a_dot_burr.jpeg
-  #   - images/a_dot_ham.jpeg
+  assets:
+    - assets/
 
   # An image asset can refer to one or more resolution-specific "variants", see
   # https://flutter.dev/assets-and-images/#resolution-aware