wip

lib/pages/sleep_page.dart

@@ -6,6 +6,6 @@ class SleepPage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Center(child: SleepForm());
+    return const Center(child: SleepForm());
   }
 }

lib/widgets/elevated_card.dart

@@ -1,17 +1,37 @@
 import 'package:flutter/material.dart';
 
 class ElevatedCard extends StatelessWidget {
-  final Widget? _child;
+  final Widget child;
-  const ElevatedCard(this._child, {super.key});
+  final String title;
+
+  const ElevatedCard({
+    Key? key,
+    required this.child,
+    required this.title,
+  }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return Center(
+    return Card(
-      child: Card(
+      elevation: 4.0,
-        child: SizedBox(
+      shape: RoundedRectangleBorder(
-          width: 300,
+        borderRadius: BorderRadius.circular(16.0),
-          height: 100,
+      ),
-          child: _child,
+      child: Padding(
+        padding: const EdgeInsets.all(16.0),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(
+              title,
+              style: TextStyle(
+                fontSize: 18.0,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+            SizedBox(height: 8.0),
+            child,
+          ],
         ),
       ),
     );

lib/widgets/sleep_form.dart

@@ -6,7 +6,7 @@ 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});
+  const SleepForm({Key? key}) : super(key: key);
 
   @override
   State<SleepForm> createState() => _SleepFormState();
@@ -14,21 +14,18 @@ class SleepForm extends StatefulWidget {
 
 class _SleepFormState extends State<SleepForm> {
   final GlobalKey<FormState> _sleepFormKey = GlobalKey<FormState>();
-  MySlider slider = const MySlider('Bewerte deinen Schlaf');
+  MySlider slider = const MySlider('');
   String _textInput = "";
   TimePicker sleepTimePicker = TimePicker(
     const TimeOfDay(hour: 22, minute: 00),
-    descriptionText: 'eingeschlafen um',
   );
   TimePicker wakeUpTimePicker = TimePicker(
     const TimeOfDay(hour: 8, minute: 00),
-    descriptionText: 'aufgewacht um',
   );
 
   void submitForm() {
     if (_sleepFormKey.currentState!.validate()) {
-      _sleepFormKey.currentState?.save(); //call every onSave Method
+      _sleepFormKey.currentState?.save();
-      //TODO Businesslogik aufrufen!
       print(_textInput);
       print(slider.getSliderValue());
       print('Eingeschlafen um: ${sleepTimePicker.getCurrentTime}');
@@ -41,17 +38,43 @@ class _SleepFormState extends State<SleepForm> {
   @override
   Widget build(BuildContext context) {
     return Form(
-        key: _sleepFormKey,
+      key: _sleepFormKey,
-        child: Column(
+      child: Stack(
-          mainAxisAlignment: MainAxisAlignment.center,
+        children: [
-          children: [
+          SingleChildScrollView(
-            ElevatedCard(sleepTimePicker),
+            child: Column(
-            ElevatedCard(wakeUpTimePicker),
+              mainAxisAlignment: MainAxisAlignment.center,
-            ElevatedCard(slider),
+              crossAxisAlignment: CrossAxisAlignment.stretch,
-            ElevatedCard(
+              children: [
-                MyTextFormField('Beschreibe deinen Schlaf', onFormFieldSave)),
+                ElevatedCard(
-            SubmitFormButton(submitForm)
+                  child: sleepTimePicker,
-          ],
+                  title: 'Einschlafzeit',
-        ));
+                ),
+                const SizedBox(height: 16),
+                ElevatedCard(
+                  child: wakeUpTimePicker,
+                  title: 'Aufwachzeit',
+                ),
+                const SizedBox(height: 16),
+                ElevatedCard(
+                  child: slider,
+                  title: 'Schlafbewertung',
+                ),
+                const SizedBox(height: 16),
+                ElevatedCard(
+                  child: MyTextFormField(
+                      'Beschreibe deinen Schlaf', onFormFieldSave),
+                  title: 'Schlafbeschreibung',
+                ),
+                const SizedBox(
+                  height: 32,
+                ),
+              ],
+            ),
+          ),
+          SubmitFormButton(submitForm),
+        ],
+      ),
+    );
   }
 }

lib/widgets/slider.dart

@@ -15,6 +15,15 @@ class MySlider extends StatefulWidget {
 }
 
 class SliderState extends State<MySlider> {
+  TextEditingController _textFieldController = TextEditingController();
+  String? _errorText;
+
+  @override
+  void initState() {
+    super.initState();
+    _textFieldController.text = _currentSliderValue.toString();
+  }
+
   @override
   Widget build(BuildContext context) {
     return Column(
@@ -25,13 +34,50 @@ class SliderState extends State<MySlider> {
           children: [
             Slider(
                 value: _currentSliderValue,
+                min: 1,
                 max: 100,
+                divisions: 99,
                 label: _currentSliderValue.round().toString(),
-                onChanged: (double value) =>
+                onChanged: (double value) {
-                    {setState((() => _currentSliderValue = value))}),
+                  setState(() {
+                    _currentSliderValue = value;
+                    _textFieldController.text = _currentSliderValue.toString();
+                    _errorText = null;
+                  });
+                }),
             Text(_currentSliderValue.round().toString())
           ],
-        )
+        ),
+        SizedBox(height: 16),
+        TextFormField(
+          controller: _textFieldController,
+          keyboardType: TextInputType.number,
+          decoration: InputDecoration(
+            labelText: 'Enter value',
+            errorText: _errorText,
+          ),
+          onChanged: (text) {
+            if (text.isEmpty) {
+              _currentSliderValue = 0;
+              setState(() {
+                _errorText = null;
+              });
+              return;
+            }
+            final value = double.tryParse(text);
+            if (value == null || value < 1 || value > 100) {
+              setState(() {
+                _textFieldController.clear();
+                _errorText = 'Please enter a value between 1 and 100.';
+              });
+              return;
+            }
+            setState(() {
+              _currentSliderValue = value;
+              _errorText = null;
+            });
+          },
+        ),
       ],
     );
   }

lib/widgets/timepicker.dart

@@ -3,8 +3,7 @@ import 'package:flutter/material.dart';
 // ignore: must_be_immutable
 class TimePicker extends StatefulWidget {
   TimeOfDay _initialTime;
-  final String descriptionText;
+  TimePicker(this._initialTime, {Key? key});
-  TimePicker(this._initialTime, {super.key, required this.descriptionText});
 
   TimeOfDay get getCurrentTime => _initialTime;
 
@@ -18,38 +17,32 @@ class TimePickerState extends State<TimePicker> {
   @override
   Widget build(BuildContext context) {
     return Center(
-      child: Column(children: [
+      child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
         Text(
-          widget.descriptionText,
+          '${widget._initialTime.hour.toString().padLeft(2, '0')}:${widget._initialTime.minute.toString().padLeft(2, '0')}',
-          style: TextStyle(fontSize: 12),
+          style: const TextStyle(fontSize: 22),
         ),
-        Row(mainAxisAlignment: MainAxisAlignment.center, children: [
+        const SizedBox(width: 16),
-          Text(
+        ElevatedButton(
-            '${widget._initialTime.hour.toString().padLeft(2, '0')}:${widget._initialTime.minute.toString().padLeft(2, '0')}',
+            onPressed: () async {
-            style: const TextStyle(fontSize: 22),
+              //TODO auslagern
-          ),
+              TimeOfDay? newTime = await showTimePicker(
-          const SizedBox(width: 16),
+                context: context,
-          ElevatedButton(
+                initialTime: widget._initialTime,
-              onPressed: () async {
+                builder: (context, child) {
-                //TODO auslagern
+                  return MediaQuery(
-                TimeOfDay? newTime = await showTimePicker(
+                    data: MediaQuery.of(context)
-                  context: context,
+                        .copyWith(alwaysUse24HourFormat: true),
-                  initialTime: widget._initialTime,
+                    child: child!,
-                  builder: (context, child) {
+                  );
-                    return MediaQuery(
+                },
-                      data: MediaQuery.of(context)
+              );
-                          .copyWith(alwaysUse24HourFormat: true),
+              if (newTime == null) return;
-                      child: child!,
+              setState(() {
-                    );
+                widget._initialTime = newTime;
-                  },
+              });
-                );
+            },
-                if (newTime == null) return;
+            child: const Text('Zeit einstellen'))
-                setState(() {
-                  widget._initialTime = newTime;
-                });
-              },
-              child: const Text('Zeit einstellen'))
-        ])
       ]),
     );
   }