Skip to content

Commit 0c2734c

Browse files
vmeng-bvmeng-b
committed
refactor: Wrap form components in Form widget and update validation logic
This commit updates the form examples in `forms_screen.dart` to demonstrate the use of the `Form` container and its `onSubmit` handler. It also refines validation parameters and adds explicit error display modes. ### Key Changes: * **Form Wrapping:** * Wrapped multiple `FormField` instances (Text-Feld, Email, Datum, and TextArea) inside `Form` widgets in both the live examples and the displayed code snippets. * Added empty `onSubmit` callbacks to illustrate form submission handling. * **Validation Updates:** * Increased the `min` length for the "Text-Feld" `LengthValidator` from `2` to `3`. * Added a custom error `message` to the "Text-Feld" validator. * Configured `showErrors` for the "Text-Feld" to trigger on both `changed` and `submitted` modes. * **Widget & Code Improvements:** * Updated `ControlledDatePicker` in the "Datum" example to include `initialValue` and an `onChanged` handler. * Added `.gap(10)` to the checkbox group layout for better spacing. * Standardized code formatting and comments within the `CodeTextLine` and `CodeCommentLine` blocks for better readability.
1 parent 0ebebb3 commit 0c2734c

1 file changed

Lines changed: 124 additions & 78 deletions

File tree

‎lib/screens/components/forms/forms_screen.dart‎

Lines changed: 124 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -45,14 +45,21 @@ class _FormsScreenState extends State<FormsScreen> {
4545
example: Column(
4646
crossAxisAlignment: CrossAxisAlignment.stretch,
4747
children: [
48-
FormField<String>(
49-
key: nameKey,
50-
label: const Text('Text-Feld'),
51-
validator: const LengthValidator(min: 2),
52-
child: const TextField(
53-
placeholder: Text('Ihr Text ...'),
54-
initialValue: '',
48+
Form(
49+
child: FormField<String>(
50+
key: nameKey,
51+
label: const Text('Text-Feld'),
52+
validator: const LengthValidator(
53+
min: 3,
54+
message: 'Der Text muss mindestens 3 Zeichen lang sein',
55+
),
56+
showErrors: {
57+
FormValidationMode.changed,
58+
FormValidationMode.submitted,
59+
},
60+
child: const TextField(placeholder: Text('Ihr Text ...')),
5561
),
62+
onSubmit: (context, values) {},
5663
),
5764
],
5865
),
@@ -63,17 +70,21 @@ class _FormsScreenState extends State<FormsScreen> {
6370
),
6471
CodeTextLine(""),
6572
CodeCommentLine("# Beispiel für Text-Eingabefelder"),
66-
CodeTextLine("FormField<String>("),
67-
CodeTextLine(" key: textKey,"),
68-
CodeTextLine(" label: const Text('Text-Feld'),"),
69-
CodeCommentLine(
70-
" # Validierung: Mindestlänge der Eingabe sind 2 Zeichen",
71-
),
72-
CodeTextLine(" validator: const LengthValidator(min: 2),"),
73-
CodeTextLine(" child: const TextField("),
74-
CodeTextLine(" placeholder: Text('Ihr Text ...'),"),
75-
CodeTextLine(" initialValue: '',"),
73+
CodeTextLine("Form("),
74+
CodeTextLine(" child: FormField<String>("),
75+
CodeTextLine(" key: nameKey,"),
76+
CodeTextLine(" label: const Text('Text-Feld'),"),
77+
CodeTextLine(" validator: const LengthValidator("),
78+
CodeTextLine(" min: 3,"),
79+
CodeTextLine(" message: 'Der Text muss mindestens 3 Zeichen lang sein',"),
80+
CodeTextLine(" ),"),
81+
CodeTextLine(" showErrors: {"),
82+
CodeTextLine(" FormValidationMode.changed,"),
83+
CodeTextLine(" FormValidationMode.submitted,"),
84+
CodeTextLine(" },"),
85+
CodeTextLine(" child: const TextField(placeholder: Text('Ihr Text ...')),"),
7686
CodeTextLine(" ),"),
87+
CodeTextLine(" onSubmit: (context, values) {},"),
7788
CodeTextLine("),"),
7889
],
7990
).withPadding(horizontal: 10),
@@ -83,16 +94,19 @@ class _FormsScreenState extends State<FormsScreen> {
8394
example: Column(
8495
crossAxisAlignment: CrossAxisAlignment.stretch,
8596
children: [
86-
FormField<String>(
87-
key: mailKey,
88-
label: const Text('Email'),
89-
validator: const EmailValidator(
90-
message:
91-
'Bitte geben Sie eine gültige Email-Adresse ein',
92-
),
93-
child: const TextField(
94-
placeholder: Text('ihre@email.de'),
97+
Form(
98+
child: FormField<String>(
99+
key: mailKey,
100+
label: const Text('Email'),
101+
validator: const EmailValidator(
102+
message:
103+
'Bitte geben Sie eine gültige Email-Adresse ein',
104+
),
105+
child: const TextField(
106+
placeholder: Text('ihre@email.de'),
107+
),
95108
),
109+
onSubmit: (context, values) {},
96110
),
97111
],
98112
),
@@ -103,18 +117,20 @@ class _FormsScreenState extends State<FormsScreen> {
103117
),
104118
CodeTextLine(""),
105119
CodeCommentLine("# Beispiel für Email-Eingabefelder"),
106-
CodeTextLine("FormField<String>("),
107-
CodeTextLine(" key: mailKey,"),
108-
CodeTextLine(" label: const Text('Email'),"),
109-
CodeCommentLine(" # Validierung: Gültige Email-Adresse"),
110-
CodeTextLine(" validator: const EmailValidator("),
111-
CodeTextLine(
112-
" message: 'Bitte geben Sie eine gültige Email-Adresse ein',",
120+
CodeTextLine("Form("),
121+
CodeTextLine(" child: FormField<String>("),
122+
CodeTextLine(" key: mailKey,"),
123+
CodeTextLine(" label: const Text('Email'),"),
124+
CodeCommentLine(" # Validierung: Gültige Email-Adresse"),
125+
CodeTextLine(" validator: const EmailValidator("),
126+
CodeTextLine(" message: 'Bitte geben Sie eine gültige Email-Adresse ein',",
113127
),
128+
CodeTextLine(" ),"),
129+
CodeTextLine(" child: const TextField("),
130+
CodeTextLine(" placeholder: Text('ihre@email.de'),"),
131+
CodeTextLine(" ),"),
114132
CodeTextLine(" ),"),
115-
CodeTextLine(" child: const TextField("),
116-
CodeTextLine(" placeholder: Text('ihre@email.de'),"),
117-
CodeTextLine(" ),"),
133+
CodeTextLine(" onSubmit: (context, values) {},"),
118134
CodeTextLine("),"),
119135
],
120136
).withPadding(horizontal: 10),
@@ -124,13 +140,19 @@ class _FormsScreenState extends State<FormsScreen> {
124140
example: Column(
125141
crossAxisAlignment: CrossAxisAlignment.stretch,
126142
children: [
127-
FormField<DateTime>(
128-
key: birthdayKey,
129-
label: const Text('Datum'),
130-
validator: const NonNullValidator(
131-
message: 'Bitte geben Sie ein Datum ein',
143+
Form(
144+
child: FormField<DateTime>(
145+
key: birthdayKey,
146+
label: const Text('Datum'),
147+
validator: const NonNullValidator(
148+
message: 'Bitte geben Sie ein Datum ein',
149+
),
150+
child: ControlledDatePicker(
151+
initialValue: DateTime.now(),
152+
onChanged: (value) {},
153+
),
132154
),
133-
child: const ControlledDatePicker(),
155+
onSubmit: (context, values) {},
134156
),
135157
],
136158
),
@@ -141,16 +163,18 @@ class _FormsScreenState extends State<FormsScreen> {
141163
),
142164
CodeTextLine(""),
143165
CodeCommentLine("# Beispiel für Datum-Eingabefelder"),
144-
CodeTextLine("FormField<DateTime>("),
145-
CodeTextLine(" key: dateKey,"),
146-
CodeTextLine(" label: const Text('Datum'),"),
147-
CodeCommentLine(
148-
" # Validierung: Eingabe darf nicht leer sein",
149-
),
150-
CodeTextLine(
151-
" validator: const NonNullValidator(message: 'Bitte geben Sie ein Datum ein'),",
152-
),
153-
CodeTextLine(" child: const ControlledDatePicker(),"),
166+
CodeTextLine("Form("),
167+
CodeTextLine(" child: FormField<DateTime>("),
168+
CodeTextLine(" key: birthdayKey,"),
169+
CodeTextLine(" label: const Text('Datum'),"),
170+
CodeTextLine(" validator: const NonNullValidator("),
171+
CodeTextLine(" message: 'Bitte geben Sie ein Datum ein',"),
172+
CodeTextLine(" ),"),
173+
CodeTextLine(" child: ControlledDatePicker("),
174+
CodeTextLine(" onChanged: (value) {},"),
175+
CodeTextLine(" ),"),
176+
CodeTextLine(" ),"),
177+
CodeTextLine(" onSubmit: (context, values) {},"),
154178
CodeTextLine("),"),
155179
],
156180
).withPadding(horizontal: 10),
@@ -160,29 +184,35 @@ class _FormsScreenState extends State<FormsScreen> {
160184
example: Column(
161185
crossAxisAlignment: CrossAxisAlignment.stretch,
162186
children: [
163-
const TextArea(
164-
initialValue: 'Hallo, Welt!',
165-
// Enable both horizontal and vertical growth based on content.
166-
expandableWidth: true,
167-
expandableHeight: true,
168-
// Larger starting dimensions to make the behavior obvious.
169-
initialWidth: 500,
170-
initialHeight: 100,
187+
Form(
188+
child: const TextArea(
189+
initialValue: 'Hallo, Welt!',
190+
expandableWidth: true,
191+
expandableHeight: true,
192+
initialWidth: 500,
193+
initialHeight: 100,
194+
),
195+
onSubmit: (context, values) {},
171196
),
172197
],
173198
),
174199
lines: [
175200
CodeCommentLine("# Beispiel für Textarea-Felder"),
176-
CodeTextLine("const TextArea("),
177-
CodeTextLine(" initialValue: 'Hallo, Welt!',"),
201+
CodeTextLine("Form("),
202+
CodeTextLine(" child: const TextArea("),
203+
CodeTextLine(" initialValue: 'Hallo, Welt!',"),
178204
CodeCommentLine(
179-
" # Angabe ob Höhe(Height) und/oder Breite(Width) anpassbar sein sollen",
205+
" # Angabe ob Höhe(Height) und/oder Breite(Width) anpassbar sein sollen",
180206
),
181-
CodeTextLine(" expandableWidth: true,"),
182-
CodeTextLine(" expandableHeight: true,"),
183-
CodeCommentLine(" # Die initiale Höhe und Breite"),
184-
CodeTextLine(" initialWidth: 500,"),
185-
CodeTextLine(" initialHeight: 100,"),
207+
CodeTextLine(" expandableWidth: true,"),
208+
CodeTextLine(" expandableHeight: true,"),
209+
CodeCommentLine(
210+
" # Initiale Höhe(Height) und Breite(Width) angeben",
211+
),
212+
CodeTextLine(" initialWidth: 500,"),
213+
CodeTextLine(" initialHeight: 100,"),
214+
CodeTextLine(" ),"),
215+
CodeTextLine(" onSubmit: (context, values) {},"),
186216
CodeTextLine("),"),
187217
],
188218
).withPadding(horizontal: 10),
@@ -421,7 +451,7 @@ class _FormsScreenState extends State<FormsScreen> {
421451
),
422452
),
423453
],
424-
),
454+
).gap(10),
425455
),
426456
lines: [
427457
CodeCommentLine("# Am Anfang der Klasse angeben"),
@@ -459,7 +489,7 @@ class _FormsScreenState extends State<FormsScreen> {
459489
CodeTextLine(" ),"),
460490
CodeTextLine(" ),"),
461491
CodeTextLine(" ],"),
462-
CodeTextLine(" ),"),
492+
CodeTextLine(" ).gap(10),"),
463493
CodeTextLine("),"),
464494
],
465495
).withPadding(horizontal: 10),
@@ -515,15 +545,21 @@ class _FormsScreenState extends State<FormsScreen> {
515545
),
516546
lines: [
517547
CodeCommentLine("# Am Anfang der Klasse angeben"),
518-
CodeCommentLine("// Hier wird der initiale Wert des Sliders angegeben (0.5)"),
519-
CodeTextLine("SliderValue sliderValue = const SliderValue.single(0.5);"),
548+
CodeCommentLine(
549+
"// Hier wird der initiale Wert des Sliders angegeben (0.5)",
550+
),
551+
CodeTextLine(
552+
"SliderValue sliderValue = const SliderValue.single(0.5);",
553+
),
520554
CodeCommentLine("# Beispiel für Single Slider"),
521555
CodeTextLine("Column("),
522556
CodeTextLine(" mainAxisSize: MainAxisSize.min,"),
523557
CodeTextLine(" children: ["),
524558
CodeTextLine(" Slider("),
525559
CodeTextLine(" # max und divisions sind optional"),
526-
CodeTextLine(" // Erlaube Werte von 0 bis 2 in 20 Schritten."),
560+
CodeTextLine(
561+
" // Erlaube Werte von 0 bis 2 in 20 Schritten.",
562+
),
527563
CodeTextLine(" max: 2,"),
528564
CodeTextLine(" divisions: 20,"),
529565
CodeTextLine(" value: sliderValue,"),
@@ -556,13 +592,19 @@ class _FormsScreenState extends State<FormsScreen> {
556592
),
557593
const Gap(16),
558594
// Display the current ranged values below the slider.
559-
Text('Werte: ${rangeSliderValue.start} - ${rangeSliderValue.end}'),
595+
Text(
596+
'Werte: ${rangeSliderValue.start} - ${rangeSliderValue.end}',
597+
),
560598
],
561599
),
562600
lines: [
563601
CodeCommentLine("# Am Anfang der Klasse angeben"),
564-
CodeCommentLine("// Hier werden die initialen Werte des Sliders angegeben (0.5 und 0.75)"),
565-
CodeTextLine("SliderValue rangeSliderValue = const SliderValue.ranged(0.5, 0.75);"),
602+
CodeCommentLine(
603+
"// Hier werden die initialen Werte des Sliders angegeben (0.5 und 0.75)",
604+
),
605+
CodeTextLine(
606+
"SliderValue rangeSliderValue = const SliderValue.ranged(0.5, 0.75);",
607+
),
566608
CodeCommentLine("# Beispiel für Range Slider"),
567609
CodeTextLine("Column("),
568610
CodeTextLine(" mainAxisSize: MainAxisSize.min,"),
@@ -577,8 +619,12 @@ class _FormsScreenState extends State<FormsScreen> {
577619
CodeTextLine(" },"),
578620
CodeTextLine(" ),"),
579621
CodeTextLine(" const Gap(16),"),
580-
CodeTextLine(" // Display the current ranged values below the slider."),
581-
CodeTextLine(" Text('Werte: \${rangeSliderValue.start} - \${rangeSliderValue.end}'),"),
622+
CodeTextLine(
623+
" // Display the current ranged values below the slider.",
624+
),
625+
CodeTextLine(
626+
" Text('Werte: \${rangeSliderValue.start} - \${rangeSliderValue.end}'),",
627+
),
582628
CodeTextLine(" ],"),
583629
CodeTextLine("),"),
584630
],

0 commit comments

Comments
 (0)