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,11 +59,10 @@ 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(
+    return Scaffold(
+        appBar: AppBar(
+            toolbarHeight: 75,
+            title: const Card(
               child: Padding(
                 padding: EdgeInsets.all(8.0),
                 child: Row(
@@ -66,38 +88,54 @@ class Finance extends StatelessWidget {
                   ],
                 ),
               ),
-          );
-        } else if (index <= transactions.length) {
+            )),
+        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 - 1].art == Art.korrektur
+                        Icon(transactions[index].art == Art.korrektur
                             ? Icons.error
                             : Icons.money),
                         Column(
                           children: [
                             Row(
                               children: [
-                          Text(DateFormat("EEEE, dd. MMMM yyyy HH:mm", 'de_DE')
+                                Text(DateFormat(
+                                        "EEEE, dd. MMMM yyyy HH:mm", 'de_DE')
                                     .format(now)),
                                 Text(
-                              '${transactions[index - 1].art}:  ${transactions[index - 1].betrag / 100}€'),
+                                    '${transactions[index].art}:  ${transactions[index].betrag / 100}€'),
                               ],
                             ),
-                      Text(transactions[index - 1].beschreibung)
+                            Expand(
+                                expand: transactions[index].elevated,
+                                child: Text(transactions[index].beschreibung))
                           ],
                         ),
                       ],
                     ),
                   ),
+                ),
               );
             } 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