Added basic Countdown timer

.idea/libraries/Dart_Packages.xml

@@ -16,6 +16,13 @@
             </list>
           </value>
         </entry>
+        <entry key="animated_digit">
+          <value>
+            <list>
+              <option value="$USER_HOME$/.pub-cache/hosted/pub.dev/animated_digit-3.2.1/lib" />
+            </list>
+          </value>
+        </entry>
         <entry key="another_flushbar">
           <value>
             <list>
@@ -1151,6 +1158,7 @@
       <root url="file://$USER_HOME$/.pub-cache/git/nextcloud-neon-dc54d2f0c2b5641f3a81a7af8e585482111ce1fc/packages/nextcloud/lib" />
       <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/_fe_analyzer_shared-61.0.0/lib" />
       <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/analyzer-5.13.0/lib" />
+      <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/animated_digit-3.2.1/lib" />
       <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/another_flushbar-1.12.30/lib" />
       <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/another_transformer_page_view-2.0.1/lib" />
       <root url="file://$USER_HOME$/.pub-cache/hosted/pub.dev/archive-3.3.7/lib" />

lib/screen/pages/more/countdown/addTimerDialog.dart

@@ -0,0 +1,59 @@
+
+import 'package:flutter/material.dart';
+
+class AddTimerDialog extends StatefulWidget {
+  const AddTimerDialog({Key? key}) : super(key: key);
+
+  @override
+  State<AddTimerDialog> createState() => _AddTimerDialogState();
+}
+
+class _AddTimerDialogState extends State<AddTimerDialog> {
+  DateTime selected = DateTime.now().add(const Duration(days: 1));
+
+  @override
+  Widget build(BuildContext context) {
+    return AlertDialog(
+      title: Text("Timer hinzufügen"),
+      content: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          TextField(
+            decoration: InputDecoration(
+              labelText: "Timer Name"
+            ),
+          ),
+
+          TextButton(onPressed: () async {
+            DateTime? selectedDate = await showDatePicker(context: context, initialDate: DateTime.now(), firstDate: DateTime.now(), lastDate: DateTime.now().add(const Duration(days: 365 * 10)));
+            if(selectedDate == null) return;
+
+            setState(() {
+              selected = selectedDate;
+            });
+
+          }, child: Text("Datum auswählen")),
+
+          TextButton(onPressed: () async {
+            TimeOfDay? selectedTime = await showTimePicker(context: context, initialTime: TimeOfDay.fromDateTime(DateTime.now()));
+            if(selectedTime == null) return;
+
+            setState(() {
+              selected = selected.copyWith(hour: selectedTime.hour, minute: selectedTime.minute);
+            });
+          }, child: Text("Zeit auswählen")),
+
+          Text(selected.toString())
+        ],
+      ),
+      actions: [
+        TextButton(onPressed: () {
+          Navigator.of(context).pop();
+        }, child: Text("Abbrechen")),
+        TextButton(onPressed: () {
+          // TODO add timer
+        }, child: Text("Hinzufügen")),
+      ],
+    );
+  }
+}

lib/screen/pages/more/countdown/animatedTime.dart

@@ -0,0 +1,53 @@
+import 'dart:async';
+
+import 'package:animated_digit/animated_digit.dart';
+import 'package:flutter/cupertino.dart';
+
+class AnimatedTime extends StatefulWidget {
+  final Duration Function() callback;
+  const AnimatedTime({Key? key, required this.callback}) : super(key: key);
+
+  @override
+  State<AnimatedTime> createState() => _AnimatedTimeState();
+}
+
+class _AnimatedTimeState extends State<AnimatedTime> {
+  Duration current = Duration.zero;
+
+  @override
+  void initState() {
+    super.initState();
+    Timer.periodic(const Duration(seconds: 1), (Timer t) => update());
+  }
+
+  void update() {
+    setState(() {
+      current = widget.callback();
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        const Text("Noch "),
+        buildWidget(current.inDays),
+        const Text(" Tage, "),
+        buildWidget(current.inHours > 24 ? current.inHours - current.inDays * 24 : current.inHours),
+        const Text(":"),
+        buildWidget(current.inMinutes > 60 ? current.inMinutes - current.inHours * 60 : current.inMinutes),
+        const Text(":"),
+        buildWidget(current.inSeconds > 60 ? current.inSeconds - current.inMinutes * 60 : current.inSeconds),
+        const Text(""),
+      ],
+    );
+  }
+
+  AnimatedDigitWidget buildWidget(int value) {
+    return AnimatedDigitWidget(
+      value: value,
+      duration: Duration(milliseconds: 100),
+      textStyle: const TextStyle(fontSize: 15),
+    );
+  }
+}

lib/screen/pages/more/countdown/countdown.dart

@@ -0,0 +1,56 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:marianum_mobile/screen/pages/more/countdown/addTimerDialog.dart';
+import 'package:marianum_mobile/screen/pages/more/countdown/timer.dart';
+
+class Countdown extends StatefulWidget {
+  const Countdown({Key? key}) : super(key: key);
+
+  @override
+  State<Countdown> createState() => _CountdownState();
+}
+
+class _CountdownState extends State<Countdown> {
+  List<Timer> timers = List.empty(growable: true);
+
+  @override
+  void initState() {
+    super.initState();
+    timers.add(Timer(key: const Key("1"), target: DateTime.now().add(const Duration(seconds: 20)), label: "Countdown 1"));
+    timers.add(Timer(key: const Key("2"), author: "goldbaja", target: DateTime.now().add(const Duration(days: 20)), label: "Sommerferien"));
+    timers.add(Timer(key: const Key("3"), target: DateTime.now().add(const Duration(hours: 20)), label: "Joa"));
+
+    timers.sort((a, b) => a.target.compareTo(b.target));
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text("Countdown"),
+        actions: [
+          IconButton(onPressed: () {
+            showDialog(context: context, builder: (context) => AddTimerDialog());
+          }, icon: const Icon(Icons.add)),
+        ],
+      ),
+      body: ReorderableListView(
+        shrinkWrap: true,
+        footer: Container(
+          padding: EdgeInsets.only(top: 30),
+          child: Center(
+            child: Text("Halte und Ziehe ein Element um es umzusortieren.", style: TextStyle(color: Theme.of(context).disabledColor)),
+          ),
+        ),
+        onReorder: (int oldIndex, int newIndex) {  },
+        children: timers,
+
+      ),
+      // body: ListView.separated(
+      //     itemBuilder: (context, index) => timers[index],
+      //     separatorBuilder: (context, index) => const Divider(),
+      //     itemCount: timers.length
+      // )
+    );
+  }
+}

lib/screen/pages/more/countdown/timer.dart

@@ -0,0 +1,53 @@
+
+import 'package:flutter/material.dart';
+import 'package:marianum_mobile/screen/pages/more/countdown/animatedTime.dart';
+
+class Timer extends StatefulWidget {
+  final DateTime target;
+  final String? author;
+  final String label;
+  const Timer({Key? key, required this.target, this.author, required this.label}) : super(key: key);
+
+  @override
+  State<Timer> createState() => _TimerState();
+}
+
+class _TimerState extends State<Timer> {
+  late bool isLocal;
+
+  @override
+  void initState() {
+    super.initState();
+    isLocal = widget.author == null;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ListTile(
+      leading: const Icon(Icons.timer),
+      title: AnimatedTime(
+        callback: () {
+          if(widget.target.isBefore(DateTime.now())) return Duration.zero;
+          return widget.target.difference(DateTime.now());
+        },
+      ),
+      trailing: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          if(!isLocal) Row(
+            children: [
+              Text("5"),
+              IconButton(onPressed: () {
+
+              }, icon: const Icon(Icons.thumb_up_outlined)),
+            ],
+          ),
+          IconButton(onPressed: () {
+
+          }, icon: const Icon(Icons.star_outline))
+        ],
+      ),
+      subtitle: Text("${widget.label}${!isLocal ? "\ngeteilt von ${widget.author}" : ""}"),
+    );
+  }
+}

lib/screen/pages/more/debug/ThemeColors.dart

@@ -1,128 +0,0 @@
-import 'package:flutter/material.dart';
-
-class ColorPreviewWidget extends StatelessWidget {
-  @override
-  Widget build(BuildContext context) {
-    final themeData = Theme.of(context);
-
-    return ListView(
-      children: <Widget>[
-        ListTile(
-          leading: Icon(Icons.color_lens_outlined),
-          title: Text('Farbtest'),
-          onTap: () {
-            Navigator.push(
-              context,
-              MaterialPageRoute(
-                builder: (context) => ColorPreviewPage(),
-              ),
-            );
-          },
-        ),
-      ],
-    );
-  }
-}
-
-class ColorPreviewPage extends StatelessWidget {
-  @override
-  Widget build(BuildContext context) {
-    final themeData = Theme.of(context);
-    final colorScheme = themeData.colorScheme;
-
-    return Scaffold(
-      appBar: AppBar(
-        title: Text('Farbtest'),
-      ),
-      body: ListView(
-        children: <Widget>[
-          for (var entry in [
-            'Primary',
-            'Primary Variant',
-            'Secondary',
-            'Secondary Variant',
-            'Background',
-            'Surface',
-            'Error',
-            'On Primary',
-            'On Secondary',
-            'On Background',
-            'On Surface',
-            'On Error',
-          ])
-            ColorItem(name: entry, color: _getColor(colorScheme, entry)),
-        ],
-      ),
-    );
-  }
-
-  Color _getColor(ColorScheme colorScheme, String name) {
-    switch (name) {
-      case 'Primary':
-        return colorScheme.primary;
-      case 'Primary Variant':
-        return colorScheme.primaryVariant;
-      case 'Secondary':
-        return colorScheme.secondary;
-      case 'Secondary Variant':
-        return colorScheme.secondaryVariant;
-      case 'Background':
-        return colorScheme.background;
-      case 'Surface':
-        return colorScheme.surface;
-      case 'Error':
-        return colorScheme.error;
-      case 'On Primary':
-        return colorScheme.onPrimary;
-      case 'On Secondary':
-        return colorScheme.onSecondary;
-      case 'On Background':
-        return colorScheme.onBackground;
-      case 'On Surface':
-        return colorScheme.onSurface;
-      case 'On Error':
-        return colorScheme.onError;
-      default:
-        return Colors.transparent;
-    }
-  }
-}
-
-class ColorItem extends StatelessWidget {
-  final String name;
-  final Color color;
-
-  const ColorItem({Key? key, required this.name, required this.color})
-      : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    final themeData = Theme.of(context);
-
-    return Container(
-      padding: EdgeInsets.all(16.0),
-      color: color,
-      child: Row(
-        mainAxisAlignment: MainAxisAlignment.spaceBetween,
-        children: <Widget>[
-          Text(
-            name,
-            style: TextStyle(
-              color: themeData.brightness == Brightness.light
-                  ? Colors.black
-                  : Colors.white,
-            ),
-          ),
-          Text(
-            '#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}',
-            style: TextStyle(
-              color: themeData.brightness == Brightness.light
-                  ? Colors.black
-                  : Colors.white,
-            ),
-          ),
-        ],
-      ),
-    );
-  }
-}

pubspec.yaml

@@ -78,6 +78,7 @@ dependencies:
   package_info: ^2.0.2
   syncfusion_flutter_calendar: ^21.2.4
   async: ^2.11.0
+  animated_digit: ^3.2.1
 
 dev_dependencies:
   flutter_test: