diff --git a/Frontend-user/assets/logo_sonako_4c_optimal.png b/Frontend-user/assets/logo_sonako_4c_optimal.png new file mode 100644 index 0000000..298147a Binary files /dev/null and b/Frontend-user/assets/logo_sonako_4c_optimal.png differ diff --git a/Frontend-user/lib/expand.dart b/Frontend-user/lib/expand.dart new file mode 100644 index 0000000..b335d75 --- /dev/null +++ b/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 createState() => _ExpandState(); +} + +class _ExpandState extends State with SingleTickerProviderStateMixin { + late AnimationController expandController; + late Animation 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); + } +} diff --git a/Frontend-user/lib/finance.dart b/Frontend-user/lib/finance.dart index 002f08b..5e84686 100644 --- a/Frontend-user/lib/finance.dart +++ b/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 createState() => _Finance(); +} + +class _Finance extends State { final List 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; + } + }, + )); } } diff --git a/Frontend-user/lib/main.dart b/Frontend-user/lib/main.dart index be05bee..d923d94 100644 --- a/Frontend-user/lib/main.dart +++ b/Frontend-user/lib/main.dart @@ -39,6 +39,8 @@ class _MyHomePageState extends State { 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 { 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], diff --git a/Frontend-user/pubspec.yaml b/Frontend-user/pubspec.yaml index ea374c2..23ea054 100644 --- a/Frontend-user/pubspec.yaml +++ b/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