wip

lib/widgets/elevated_card.dart

@@ -0,0 +1,19 @@
+import 'package:flutter/material.dart';
+
+class ElevatedCard extends StatelessWidget {
+  final Widget? _child;
+  const ElevatedCard(this._child, {super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Card(
+        child: SizedBox(
+          width: 300,
+          height: 100,
+          child: _child,
+        ),
+      ),
+    );
+  }
+}

lib/widgets/sleep_form.dart

@@ -1,7 +1,9 @@
 import 'package:flutter/material.dart';
+import 'package:smoke_cess_app/widgets/elevated_card.dart';
 import 'package:smoke_cess_app/widgets/slider.dart';
 import 'package:smoke_cess_app/widgets/submit_form_button.dart';
 import 'package:smoke_cess_app/widgets/text_formfield.dart';
+import 'package:smoke_cess_app/widgets/timepicker.dart';
 
 class SleepForm extends StatefulWidget {
   const SleepForm({super.key});
@@ -14,6 +16,10 @@ class _SleepFormState extends State<SleepForm> {
   final GlobalKey<FormState> _sleepFormKey = GlobalKey<FormState>();
   MySlider slider = const MySlider('Bewerte deinen Schlaf');
   String _textInput = "";
+  TimePicker sleepTimePicker =
+      const TimePicker(TimeOfDay(hour: 22, minute: 00));
+  TimePicker wakeUpTimePicker =
+      const TimePicker(TimeOfDay(hour: 8, minute: 00));
 
   void submitForm() {
     if (_sleepFormKey.currentState!.validate()) {
@@ -34,8 +40,12 @@ class _SleepFormState extends State<SleepForm> {
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
-            slider,
+            TimePicker(TimeOfDay(hour: 22, minute: 00)),
-            MyTextFormField('Beschreibe deinen Schlaf', onFormFieldSave),
+            ElevatedCard(sleepTimePicker),
+            ElevatedCard(wakeUpTimePicker),
+            ElevatedCard(slider),
+            ElevatedCard(
+                MyTextFormField('Beschreibe deinen Schlaf', onFormFieldSave)),
             SubmitFormButton(submitForm)
           ],
         ));

lib/widgets/timepicker.dart

@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+
+class TimePicker extends StatefulWidget {
+  final TimeOfDay _initialTime;
+  const TimePicker(this._initialTime, {super.key});
+
+  @override
+  State<StatefulWidget> createState() => _TimePickerState();
+}
+
+class _TimePickerState extends State<TimePicker> {
+  TimeOfDay time = const TimeOfDay(hour: 12, minute: 0);
+
+  @override
+  Widget build(BuildContext context) {
+    time = widget._initialTime;
+    final hours = time.hour.toString().padLeft(2, '0');
+    final minutes = time.minute.toString().padLeft(2, '0');
+
+    return Center(
+      child: Column(children: [
+        const Text(
+          'Das ist die Zeit',
+          style: TextStyle(fontSize: 18),
+        ),
+        const SizedBox(height: 16),
+        Row(mainAxisAlignment: MainAxisAlignment.center, children: [
+          Text(
+            '${time.hour}:${time.minute}',
+            style: const TextStyle(fontSize: 32),
+          ),
+          const SizedBox(width: 16),
+          ElevatedButton(
+              onPressed: () async {
+                //TODO auslagern
+                TimeOfDay? newTime = await showTimePicker(
+                  context: context,
+                  initialTime: time,
+                  builder: (context, child) {
+                    return MediaQuery(
+                      data: MediaQuery.of(context)
+                          .copyWith(alwaysUse24HourFormat: true),
+                      child: child!,
+                    );
+                  },
+                );
+                if (newTime == null) return;
+                setState(() {
+                  time = newTime;
+                  print('Zeit geändert $newTime, Zeit aktualisiert?: $time');
+                });
+              },
+              child: const Text('Zeit einstellen'))
+        ])
+      ]),
+    );
+  }
+}