From f5ef084997d4ba115549cf56399de51d57d29aa5 Mon Sep 17 00:00:00 2001 From: Parricc35 <63447810+Parricc35@users.noreply.github.com> Date: Mon, 20 Feb 2023 23:59:40 +0100 Subject: [PATCH] wip --- lib/pages/sleep_page.dart | 2 +- lib/widgets/elevated_card.dart | 36 ++++++++++++++++----- lib/widgets/sleep_form.dart | 59 +++++++++++++++++++++++----------- lib/widgets/slider.dart | 52 ++++++++++++++++++++++++++++-- lib/widgets/timepicker.dart | 57 ++++++++++++++------------------ 5 files changed, 144 insertions(+), 62 deletions(-) diff --git a/lib/pages/sleep_page.dart b/lib/pages/sleep_page.dart index ebb89d4..e736f44 100644 --- a/lib/pages/sleep_page.dart +++ b/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()); } } diff --git a/lib/widgets/elevated_card.dart b/lib/widgets/elevated_card.dart index a836219..eba4532 100644 --- a/lib/widgets/elevated_card.dart +++ b/lib/widgets/elevated_card.dart @@ -1,17 +1,37 @@ import 'package:flutter/material.dart'; class ElevatedCard extends StatelessWidget { - final Widget? _child; - const ElevatedCard(this._child, {super.key}); + final Widget child; + final String title; + + const ElevatedCard({ + Key? key, + required this.child, + required this.title, + }) : super(key: key); @override Widget build(BuildContext context) { - return Center( - child: Card( - child: SizedBox( - width: 300, - height: 100, - child: _child, + return Card( + elevation: 4.0, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(16.0), + ), + 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, + ], ), ), ); diff --git a/lib/widgets/sleep_form.dart b/lib/widgets/sleep_form.dart index e11dba7..4a21672 100644 --- a/lib/widgets/sleep_form.dart +++ b/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 createState() => _SleepFormState(); @@ -14,21 +14,18 @@ class SleepForm extends StatefulWidget { class _SleepFormState extends State { final GlobalKey _sleepFormKey = GlobalKey(); - 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 - //TODO Businesslogik aufrufen! + _sleepFormKey.currentState?.save(); print(_textInput); print(slider.getSliderValue()); print('Eingeschlafen um: ${sleepTimePicker.getCurrentTime}'); @@ -41,17 +38,43 @@ class _SleepFormState extends State { @override Widget build(BuildContext context) { return Form( - key: _sleepFormKey, - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - ElevatedCard(sleepTimePicker), - ElevatedCard(wakeUpTimePicker), - ElevatedCard(slider), - ElevatedCard( - MyTextFormField('Beschreibe deinen Schlaf', onFormFieldSave)), - SubmitFormButton(submitForm) - ], - )); + key: _sleepFormKey, + child: Stack( + children: [ + SingleChildScrollView( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + ElevatedCard( + 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), + ], + ), + ); } } diff --git a/lib/widgets/slider.dart b/lib/widgets/slider.dart index ba9d78b..4c6b28b 100644 --- a/lib/widgets/slider.dart +++ b/lib/widgets/slider.dart @@ -15,6 +15,15 @@ class MySlider extends StatefulWidget { } class SliderState extends State { + 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 { children: [ Slider( value: _currentSliderValue, + min: 1, max: 100, + divisions: 99, label: _currentSliderValue.round().toString(), - onChanged: (double value) => - {setState((() => _currentSliderValue = value))}), + onChanged: (double 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; + }); + }, + ), ], ); } diff --git a/lib/widgets/timepicker.dart b/lib/widgets/timepicker.dart index 98f6a54..ce93bfb 100644 --- a/lib/widgets/timepicker.dart +++ b/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, {super.key, required this.descriptionText}); + TimePicker(this._initialTime, {Key? key}); TimeOfDay get getCurrentTime => _initialTime; @@ -18,38 +17,32 @@ class TimePickerState extends State { @override Widget build(BuildContext context) { return Center( - child: Column(children: [ + child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [ Text( - widget.descriptionText, - style: TextStyle(fontSize: 12), + '${widget._initialTime.hour.toString().padLeft(2, '0')}:${widget._initialTime.minute.toString().padLeft(2, '0')}', + style: const TextStyle(fontSize: 22), ), - Row(mainAxisAlignment: MainAxisAlignment.center, children: [ - Text( - '${widget._initialTime.hour.toString().padLeft(2, '0')}:${widget._initialTime.minute.toString().padLeft(2, '0')}', - style: const TextStyle(fontSize: 22), - ), - const SizedBox(width: 16), - ElevatedButton( - onPressed: () async { - //TODO auslagern - TimeOfDay? newTime = await showTimePicker( - context: context, - initialTime: widget._initialTime, - builder: (context, child) { - return MediaQuery( - data: MediaQuery.of(context) - .copyWith(alwaysUse24HourFormat: true), - child: child!, - ); - }, - ); - if (newTime == null) return; - setState(() { - widget._initialTime = newTime; - }); - }, - child: const Text('Zeit einstellen')) - ]) + const SizedBox(width: 16), + ElevatedButton( + onPressed: () async { + //TODO auslagern + TimeOfDay? newTime = await showTimePicker( + context: context, + initialTime: widget._initialTime, + builder: (context, child) { + return MediaQuery( + data: MediaQuery.of(context) + .copyWith(alwaysUse24HourFormat: true), + child: child!, + ); + }, + ); + if (newTime == null) return; + setState(() { + widget._initialTime = newTime; + }); + }, + child: const Text('Zeit einstellen')) ]), ); }