more theming, added screenshots

README.md

@@ -18,7 +18,10 @@ A Reminder based on todo.txt synced via nextcloud
 - [ ] make application-settings
   - [ ] store/load settings
   - [ ] setting for number of days into the future
-  - [ ] theme (light/dark mode, system theme)
+  - [ ] theme
+    - [x] light/dark mode
+    - [ ] color theme by system colors
+    - [ ] own primary/secondary color theme
 - [ ] fancy pop-animation & sound for the checkbox
 
 ## Current looks:
@@ -35,3 +38,7 @@ A Reminder based on todo.txt synced via nextcloud
 
 ### Complex repeat patterns
 ![](img/2023-01-10_repeat_patterns.png)
+
+### Light/Dark theme
+![](img/2023-01-13_theme_light.png)
+![](img/2023-01-13_theme_dark.png)

lib/addReminder.dart

@@ -1,6 +1,8 @@
 import 'package:date_field/date_field.dart';
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
+import 'package:gap/gap.dart';
 import 'package:nextcloud_reminder/repeating_task.dart';
 import 'package:nextcloud_reminder/types/repeat.dart';
 import 'package:nextcloud_reminder/types/tasks.dart';
@@ -35,29 +37,60 @@ class _AddTaskWidgetState extends State<AddTaskWidget> {
 
   String _prettyInterval(DateInterval d) {
     switch (d) {
-      default:
-        return d.toString();
+      case DateInterval.daily: return "day";
+      case DateInterval.weekly: return "week";
+      case DateInterval.monthly: return "month";
+      case DateInterval.monday: return "monday";
+      case DateInterval.tuesday: return "tuesday";
+      case DateInterval.wednesday: return "wednesday";
+      case DateInterval.thursday: return "thursday";
+      case DateInterval.friday: return "friday";
+      case DateInterval.saturday: return "saturday";
+      case DateInterval.sunday: return "sunday";
+      case DateInterval.dayOfMonth: return "day of the month";
+      case DateInterval.dayOfYear: return "day of the year";
     }
   }
 
   Widget _repeatBuilder(BuildContext context, Tuple2<TextEditingController,ValueNotifier<DateInterval>> data) {
-    return Row(
+    return IntrinsicHeight(child: Row(
+      crossAxisAlignment: CrossAxisAlignment.center,
       children: [
-        Text("Repeat every " ),
-        Expanded(
-          flex: 1,
+        SizedBox(
+          width: 200,
           child: TextFormField(
             controller: data.item1,
-            decoration: const InputDecoration(
-              hintText: "1",
+            decoration: InputDecoration(
+              prefix: const Text("Repeat every "),
+              suffix: () {
+                  if (data.item1.value.text.isEmpty) return const Text("");
+                  switch (data.item1.value.text.substring(data.item1.value.text.length - 1)) {
+                    case "1":
+                      return const Text("st");
+                    case "2":
+                      return const Text("nd");
+                    case "3":
+                      return const Text("rd");
+                    default:
+                      return const Text("th");
+              }}(),
+              border: const OutlineInputBorder()
             ),
+            textAlign: TextAlign.end,
             keyboardType: const TextInputType.numberWithOptions(signed: false, decimal: false),
             inputFormatters: [FilteringTextInputFormatter.digitsOnly],
+            onChanged: (_) {setState(() {
+              //nothing just rerender.
+            });},
           ),
         ),
+        const Gap(4),
         Expanded(
-          flex: 3,
-          child: DropdownButton<DateInterval>(
+          //padding: const EdgeInsets.only(left: 30, right: 20),
+          child: DropdownButtonFormField<DateInterval>(
+            decoration: const InputDecoration(
+              border: OutlineInputBorder(),
+            ),
             items: DateInterval.values.map((v) => DropdownMenuItem(value: v, child: Text(_prettyInterval(v)))).toList(),
             onChanged: (v) => setState(() {
               data.item2.value = v ?? data.item2.value;
@@ -65,11 +98,21 @@ class _AddTaskWidgetState extends State<AddTaskWidget> {
             value: data.item2.value,
           ),
         ),
-        IconButton(onPressed: () => setState(() {
+        PreferredSize(
+          preferredSize: const Size.square(40),
+          child: IconButton(
+          alignment: Alignment.topCenter,
+          onPressed: () => setState(() {
             _repeatEveryController.remove(data);
-        }), icon: Icon(Icons.remove, color: Theme.of(context).errorColor,)),
+          }),
+          icon: Icon(Icons.remove, color: Theme.of(context).errorColor,)
+        )),
       ],
-    );
+    ));
+  }
+
+  Widget _addPadding(Widget w) {
+    return Padding(padding: EdgeInsets.all(4), child: w);
   }
 
   @override
@@ -83,7 +126,7 @@ class _AddTaskWidgetState extends State<AddTaskWidget> {
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            TextFormField(
+            _addPadding(TextFormField(
               // The validator receives the text that the user has entered.
               validator: (value) {
                 if (value == null || value.isEmpty) {
@@ -91,13 +134,14 @@ class _AddTaskWidgetState extends State<AddTaskWidget> {
                 }
                 return null;
               },
+              autofocus: true,
               controller: _titleController,
               decoration: const InputDecoration(
                 labelText: "Taskname"
               ),
-            ),
+            )),
 
-            DateTimeField(
+            _addPadding(DateTimeField(
               onDateSelected: (v) => setState(() { _beginDate = v; }),
               selectedDate: _beginDate,
               decoration: const InputDecoration(
@@ -105,15 +149,16 @@ class _AddTaskWidgetState extends State<AddTaskWidget> {
                 labelText: "Begin"
               ),
               mode: DateTimeFieldPickerMode.date,
-            ),
-            ] + _repeatEveryController.map((c) => _repeatBuilder(context,c)).toList()
+            )),
+            ] + _repeatEveryController.map((c) => _addPadding(_repeatBuilder(context,c))).toList()
             + [
+            _addPadding(_addPadding(Row(
+              children: [
                 ElevatedButton(onPressed: () => setState(() {
                   _repeatEveryController.add(_emptyRepetition());
                 }), child: const Text("add repetition")),
-            Padding(
-              padding: const EdgeInsets.symmetric(vertical: 16.0),
-              child: ElevatedButton(
+                Expanded(child: Container()),
+                ElevatedButton(
                   onPressed: () {
                     // Validate returns true if the form is valid, or false otherwise.
                     if (_formKey.currentState!.validate()) {
@@ -137,7 +182,8 @@ class _AddTaskWidgetState extends State<AddTaskWidget> {
                   },
                   child: const Text('Submit'),
                 ),
-            ),
+              ]
+            ))),
           ],
         ),
       )

lib/main.dart

@@ -1,23 +1,65 @@
 import 'package:flutter/material.dart';
+import 'package:intl/date_symbol_data_local.dart';
+import 'package:intl/intl_standalone.dart';
 import 'package:nextcloud_reminder/homescreen.dart';
 
 
 void main() {
-  runApp(const TodoTxtReminderApp());
+  findSystemLocale().then((value) =>
+    initializeDateFormatting(value).then((_) =>
+    runApp(const TodoTxtReminderApp())
+  ));
 }
 
 class TodoTxtReminderApp extends StatelessWidget {
   const TodoTxtReminderApp({super.key});
+  static const primaryColor = Colors.pink;
+  static const secondaryColor = Colors.amber;
+
+  getInteractColor(Color a, Color b) {
+    return (Set<MaterialState> states) {
+      const Set<MaterialState> interactiveStates = <MaterialState>{
+        MaterialState.pressed,
+        MaterialState.hovered,
+        MaterialState.focused,
+      };
+      if (states.any(interactiveStates.contains)) {
+        return b;
+      }
+      return a;
+    };
+  }
+
+  Color getColor(Set<MaterialState> states) {
+    return getInteractColor(primaryColor, secondaryColor)(states);
+  }
 
   // This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
+    const inputDecorationTheme = InputDecorationTheme(border: OutlineInputBorder(), focusColor: secondaryColor);
+
     return MaterialApp(
       title: 'Nextcloud Reminder',
       theme: ThemeData(
-        // This is the theme of your application.
-        primarySwatch: Colors.blue,
+        brightness: Brightness.light,
+        colorScheme: ThemeData.light().colorScheme.copyWith(primary: primaryColor, secondary: secondaryColor, background: primaryColor.shade50),
+        inputDecorationTheme: inputDecorationTheme,
+        checkboxTheme: ThemeData.light().checkboxTheme.copyWith(
+            fillColor: MaterialStateProperty.resolveWith(getColor),
+            checkColor: MaterialStateProperty.resolveWith(getInteractColor(Colors.white,Colors.black))
         ),
+      ),
+      darkTheme: ThemeData(
+        brightness: Brightness.dark,
+        colorScheme: ThemeData.dark().colorScheme.copyWith(primary: primaryColor, secondary: secondaryColor, background: primaryColor.shade500.withAlpha(32)),
+        inputDecorationTheme: inputDecorationTheme,
+        checkboxTheme: ThemeData.dark().checkboxTheme.copyWith(
+            fillColor: MaterialStateProperty.resolveWith(getColor),
+            checkColor: MaterialStateProperty.resolveWith(getInteractColor(Colors.white,Colors.black))
+        ),
+      ),
+      themeMode: ThemeMode.system,
       home: const HomeWidget(title: 'todo.txt reminder'),
     );
   }

lib/repeating_task.dart

@@ -33,7 +33,9 @@ class _RepeatingTaskState extends State<RepeatingTask> {
   @override
   Widget build(BuildContext context) {
     return Container(
-        decoration: const BoxDecoration(border: Border(bottom: BorderSide(),)),
+        decoration: BoxDecoration(border: Border(
+            bottom: BorderSide(color: Theme.of(context).colorScheme.background, width: 1),
+        ),),
         margin: const EdgeInsets.all(0.0),
         child: Row(
           crossAxisAlignment: CrossAxisAlignment.start,

lib/table.dart

@@ -1,4 +1,7 @@
+import 'dart:math';
+
 import 'package:flutter/material.dart';
+import 'package:intl/intl.dart';
 import 'package:nextcloud_reminder/repeating_task.dart';
 import 'package:nextcloud_reminder/types/tasks.dart';
 
@@ -26,6 +29,7 @@ class ScrollTable extends StatefulWidget {
 
 class _ScrollTableState extends State<ScrollTable> {
   final List<RepeatingTask> _content = [];
+  final _contentStart = DateTime.now();
 
   addTask(RepeatingTask task) {
     setState(() {
@@ -52,7 +56,7 @@ class _ScrollTableState extends State<ScrollTable> {
               children: [ Text(t.task.title),
                 Text("Projects: ${t.task.projects.isEmpty ? "none" : t.task.projects.join(", ")}"),
                 Text("Contexts: ${t.task.contexts.isEmpty ? "none" : t.task.contexts.join(", ")}"),
-                Padding(padding: EdgeInsets.only(top: 16),
+                Padding(padding: const EdgeInsets.only(top: 16),
                   child: Text(t.task.meta.isEmpty ? "" : "Meta:", style: Theme.of(context).textTheme.bodyLarge,)
                 ),
               ] + List.of(t.task.meta.entries.map((e) => Text("${e.key}: ${e.value}"))),
@@ -75,19 +79,51 @@ class _ScrollTableState extends State<ScrollTable> {
     });
   }
 
+  Widget _todoHeader(BuildContext context) {
+    return Container(
+      width: 200,
+      height: 60,
+      alignment: Alignment.bottomLeft,
+      padding: const EdgeInsets.only(left: 8, right: 8, bottom: 12),
+      decoration: BoxDecoration(color: Theme.of(context).colorScheme.background),
+      child: Text("TODO", style: Theme.of(context).textTheme.titleSmall?.copyWith(color: Theme.of(context).colorScheme.primary),),
+    );
+  }
+
+  Widget _datesHeader(BuildContext context) {
+    return Row(
+        children: List.generate(10, (i) => Container(
+          width: 60,
+          height: 60,
+          alignment: Alignment.bottomCenter,
+          padding: const EdgeInsets.only(left: 8, right: 8, bottom: 16),
+          decoration: BoxDecoration(color: Theme.of(context).colorScheme.background),
+          child: Transform.rotate(angle: -pi/3,
+            child: Text(DateFormat.Md().format(_contentStart.add(Duration(days: i))),
+                style: Theme.of(context).textTheme.titleMedium?.copyWith(color: Theme.of(context).colorScheme.primary),),
+        )
+        ))
+    );
+  }
+
+
   List<Widget> _buildTitles(BuildContext context) {
     return List<Widget>.from(_content.map((RepeatingTask t) =>
         Container(
           alignment: Alignment.centerLeft,
-          width: 150.0,
+          width: 200.0,
           height: 60.0,
-          margin: const EdgeInsets.only(left: 4, top: 1),
-          decoration: const BoxDecoration(color: Colors.white, border: Border(bottom: BorderSide(),)),
-          child: TextButton(
+          margin: const EdgeInsets.only(top: 1),
+          decoration: BoxDecoration(color: Theme.of(context).canvasColor, border: Border(bottom: BorderSide(color: Theme.of(context).colorScheme.background, width: 1),)),
+          child: SizedBox(width: 200, child: TextButton(
             onPressed: () => _showDetailsAndRemoveTask(context,t),
+            style: const ButtonStyle(alignment: AlignmentDirectional.centerStart),
             child: Text(t.task.title,
-                      style: Theme.of(context).textTheme.labelMedium),
+                      softWrap: true,
+                      textAlign: TextAlign.left,
+                      style: Theme.of(context).textTheme.titleSmall,
               )
+            )),
           )
         )
     );
@@ -97,19 +133,19 @@ class _ScrollTableState extends State<ScrollTable> {
   Widget build(BuildContext context) {
     return SingleChildScrollView(
         child: Row(
-          crossAxisAlignment: CrossAxisAlignment.start,
+          crossAxisAlignment: CrossAxisAlignment.center,
           children: <Widget>[
             Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               //TODO: Text in container wie bei _buildTitles oben und width/height/margin/etc. festnageln.
-              children: List<Widget>.from([Text("Todo", style: Theme.of(context).dataTableTheme.headingTextStyle,)]) + _buildTitles(context),
+              children: List<Widget>.from([_todoHeader(context)]) + _buildTitles(context),
             ),
             Flexible(
               child: SingleChildScrollView(
                 scrollDirection: Axis.horizontal,
                 child: Column(
                   crossAxisAlignment: CrossAxisAlignment.start,
-                  children: List<Widget>.from([Text("header ... date, date, date .. fancy turned 60 degrees", style: Theme.of(context).dataTableTheme.headingTextStyle)]) + List<Widget>.from(_content),
+                  children: [_datesHeader(context)] + List<Widget>.from(_content),
                 ),
               ),
             )

lib/task_item.dart

@@ -26,7 +26,9 @@ class _TaskItemState extends State<TaskItem>{
       alignment: Alignment.center,
       width: 60.0,
       height: 60.0,
-      color: Colors.white,
+      decoration: BoxDecoration(border: Border(
+          left: BorderSide(color: Theme.of(context).colorScheme.background, width: 1)
+      ),),
       margin: const EdgeInsets.all(0.0),
       child: _done == null ? null : Checkbox(value: _done, onChanged: (newState) => setState(() {
         _done = newState!;

pubspec.lock

@@ -100,8 +100,15 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "0.2.2"
+  gap:
+    dependency: "direct main"
+    description:
+      name: gap
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.1"
   intl:
-    dependency: transitive
+    dependency: "direct main"
     description:
       name: intl
       url: "https://pub.dartlang.org"

pubspec.yaml

@@ -42,6 +42,8 @@ dependencies:
   flutter_window_close: ^0.2.2
   collection: ^1.16.0
   date_field: ^3.0.2
+  gap: ^2.0.1
+  intl: ^0.17.0
 
 dev_dependencies:
   flutter_test: