Skip to content

Commit e8b7d34

Browse files
martijn00martijn00
committed
Add more to example
1 parent 5ce3ef1 commit e8b7d34

File tree

1 file changed

+223
-40
lines changed

1 file changed

+223
-40
lines changed

‎example/lib/home_page.dart

Lines changed: 223 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,241 @@
11
import 'package:flutter/material.dart';
22
import 'package:form_builder_validators/form_builder_validators.dart';
33

4-
class HomePage extends StatefulWidget {
4+
class HomePage extends StatelessWidget {
55
const HomePage({super.key});
66

7-
@override
8-
HomePageState createState() => HomePageState();
9-
}
10-
11-
class HomePageState extends State<HomePage> {
127
@override
138
Widget build(BuildContext context) {
149
return Scaffold(
1510
appBar: AppBar(title: const Text('Form Builder Validators')),
1611
body: Padding(
1712
padding: const EdgeInsets.all(8),
18-
child: Column(
19-
children: <Widget>[
20-
TextFormField(
21-
decoration: const InputDecoration(labelText: 'Name'),
22-
validator: FormBuilderValidators.required(),
23-
autovalidateMode: AutovalidateMode.always,
24-
),
13+
child: SingleChildScrollView(
14+
child: Column(
15+
children: <Widget>[
16+
// Composing multiple validators
17+
TextFormField(
18+
decoration: const InputDecoration(labelText: 'Age'),
19+
keyboardType: TextInputType.number,
20+
autovalidateMode: AutovalidateMode.always,
21+
validator: FormBuilderValidators.compose([
22+
/// Makes this field required
23+
FormBuilderValidators.required(),
2524

26-
// Composing multiple validators
27-
TextFormField(
28-
decoration: const InputDecoration(labelText: 'Age'),
29-
keyboardType: TextInputType.number,
30-
autovalidateMode: AutovalidateMode.always,
31-
validator: FormBuilderValidators.compose([
32-
/// Makes this field required
33-
FormBuilderValidators.required(),
25+
/// Ensures the value entered is numeric - with custom error message
26+
FormBuilderValidators.numeric(
27+
errorText: 'La edad debe ser numérica.',
28+
),
3429

35-
/// Ensures the value entered is numeric - with custom error message
36-
FormBuilderValidators.numeric(
37-
errorText: 'La edad debe ser numérica.',
38-
),
39-
40-
/// Sets a maximum value of 70
41-
FormBuilderValidators.max(70),
30+
/// Sets a maximum value of 70
31+
FormBuilderValidators.max(70),
4232

43-
/// Include your own custom `FormFieldValidator` function, if you want
44-
/// Ensures positive values only. We could also have used `FormBuilderValidators.min( 0)` instead
45-
(val) {
46-
if (val != null) {
47-
final number = int.tryParse(val);
48-
if (number == null) return null;
49-
if (number < 0) return 'We cannot have a negative age';
33+
/// Include your own custom `FormFieldValidator` function, if you want
34+
/// Ensures positive values only. We could also have used `FormBuilderValidators.min( 0)` instead
35+
(val) {
36+
if (val != null) {
37+
final number = int.tryParse(val);
38+
if (number == null) return null;
39+
if (number < 0) return 'We cannot have a negative age';
40+
}
41+
return null;
5042
}
51-
return null;
52-
}
53-
]),
54-
),
55-
],
43+
]),
44+
),
45+
// Required Validator
46+
TextFormField(
47+
decoration: const InputDecoration(
48+
labelText: 'Required Field',
49+
prefixIcon: Icon(Icons.star),
50+
),
51+
validator: FormBuilderValidators.required(),
52+
autofillHints: const [AutofillHints.name],
53+
textInputAction: TextInputAction.next,
54+
autovalidateMode: AutovalidateMode.always,
55+
),
56+
// Numeric Validator
57+
TextFormField(
58+
decoration: const InputDecoration(
59+
labelText: 'Numeric Field',
60+
prefixIcon: Icon(Icons.numbers),
61+
),
62+
keyboardType: TextInputType.number,
63+
validator: FormBuilderValidators.numeric(),
64+
autofillHints: const [AutofillHints.oneTimeCode],
65+
textInputAction: TextInputAction.next,
66+
autovalidateMode: AutovalidateMode.always,
67+
),
68+
// Email Validator
69+
TextFormField(
70+
decoration: const InputDecoration(
71+
labelText: 'Email Field',
72+
prefixIcon: Icon(Icons.email),
73+
),
74+
keyboardType: TextInputType.emailAddress,
75+
validator: FormBuilderValidators.email(),
76+
autofillHints: const [AutofillHints.email],
77+
textInputAction: TextInputAction.next,
78+
autovalidateMode: AutovalidateMode.always,
79+
),
80+
// URL Validator
81+
TextFormField(
82+
decoration: const InputDecoration(
83+
labelText: 'URL Field',
84+
prefixIcon: Icon(Icons.link),
85+
),
86+
keyboardType: TextInputType.url,
87+
validator: FormBuilderValidators.url(),
88+
autofillHints: const [AutofillHints.url],
89+
textInputAction: TextInputAction.next,
90+
autovalidateMode: AutovalidateMode.always,
91+
),
92+
// Min Length Validator
93+
TextFormField(
94+
decoration: const InputDecoration(
95+
labelText: 'Min Length Field',
96+
prefixIcon: Icon(Icons.text_fields),
97+
),
98+
validator: FormBuilderValidators.minLength(5),
99+
textInputAction: TextInputAction.next,
100+
autovalidateMode: AutovalidateMode.always,
101+
),
102+
// Max Length Validator
103+
TextFormField(
104+
decoration: const InputDecoration(
105+
labelText: 'Max Length Field',
106+
prefixIcon: Icon(Icons.text_fields),
107+
),
108+
validator: FormBuilderValidators.maxLength(10),
109+
textInputAction: TextInputAction.next,
110+
autovalidateMode: AutovalidateMode.always,
111+
),
112+
// Min Validator
113+
TextFormField(
114+
decoration: const InputDecoration(
115+
labelText: 'Min Value Field',
116+
prefixIcon: Icon(Icons.exposure_neg_1),
117+
),
118+
keyboardType: TextInputType.number,
119+
validator: FormBuilderValidators.min(10),
120+
textInputAction: TextInputAction.next,
121+
autovalidateMode: AutovalidateMode.always,
122+
),
123+
// Max Validator
124+
TextFormField(
125+
decoration: const InputDecoration(
126+
labelText: 'Max Value Field',
127+
prefixIcon: Icon(Icons.exposure_plus_1),
128+
),
129+
keyboardType: TextInputType.number,
130+
validator: FormBuilderValidators.max(100),
131+
textInputAction: TextInputAction.next,
132+
autovalidateMode: AutovalidateMode.always,
133+
),
134+
// Equal Validator
135+
TextFormField(
136+
decoration: const InputDecoration(
137+
labelText: 'Equal Field',
138+
prefixIcon: Icon(Icons.check),
139+
),
140+
validator: FormBuilderValidators.equal('test'),
141+
textInputAction: TextInputAction.next,
142+
autovalidateMode: AutovalidateMode.always,
143+
),
144+
// Contains Validator
145+
TextFormField(
146+
decoration: const InputDecoration(
147+
labelText: 'Contains "test"',
148+
prefixIcon: Icon(Icons.search),
149+
),
150+
validator: FormBuilderValidators.contains(substring: 'test'),
151+
textInputAction: TextInputAction.next,
152+
autovalidateMode: AutovalidateMode.always,
153+
),
154+
// Match Validator
155+
TextFormField(
156+
decoration: const InputDecoration(
157+
labelText: 'Match Pattern',
158+
prefixIcon: Icon(Icons.pattern),
159+
),
160+
validator: FormBuilderValidators.match(r'^[a-zA-Z0-9]+$'),
161+
textInputAction: TextInputAction.next,
162+
autovalidateMode: AutovalidateMode.always,
163+
),
164+
// IP Validator
165+
TextFormField(
166+
decoration: const InputDecoration(
167+
labelText: 'IP Field',
168+
prefixIcon: Icon(Icons.computer),
169+
),
170+
keyboardType: TextInputType.number,
171+
validator: FormBuilderValidators.ip(),
172+
textInputAction: TextInputAction.next,
173+
autovalidateMode: AutovalidateMode.always,
174+
),
175+
// UUID Validator
176+
TextFormField(
177+
decoration: const InputDecoration(
178+
labelText: 'UUID Field',
179+
prefixIcon: Icon(Icons.code),
180+
),
181+
validator: FormBuilderValidators.uuid(),
182+
textInputAction: TextInputAction.next,
183+
autovalidateMode: AutovalidateMode.always,
184+
),
185+
// Credit Card Validator
186+
TextFormField(
187+
decoration: const InputDecoration(
188+
labelText: 'Credit Card Field',
189+
prefixIcon: Icon(Icons.credit_card),
190+
),
191+
keyboardType: TextInputType.number,
192+
validator: FormBuilderValidators.creditCard(),
193+
autofillHints: const [AutofillHints.creditCardNumber],
194+
textInputAction: TextInputAction.next,
195+
autovalidateMode: AutovalidateMode.always,
196+
),
197+
// Phone Number Validator
198+
TextFormField(
199+
decoration: const InputDecoration(
200+
labelText: 'Phone Number Field',
201+
prefixIcon: Icon(Icons.phone),
202+
),
203+
keyboardType: TextInputType.phone,
204+
validator: FormBuilderValidators.phoneNumber(),
205+
autofillHints: const [AutofillHints.telephoneNumber],
206+
textInputAction: TextInputAction.next,
207+
autovalidateMode: AutovalidateMode.always,
208+
),
209+
// Password Validator
210+
TextFormField(
211+
decoration: const InputDecoration(
212+
labelText: 'Password Field',
213+
prefixIcon: Icon(Icons.lock),
214+
),
215+
obscureText: true,
216+
validator: FormBuilderValidators.password(),
217+
autofillHints: const [AutofillHints.password],
218+
textInputAction: TextInputAction.done,
219+
autovalidateMode: AutovalidateMode.always,
220+
),
221+
// Custom Validators Example
222+
TextFormField(
223+
decoration: const InputDecoration(
224+
labelText: 'Custom Age Validator',
225+
prefixIcon: Icon(Icons.calendar_today),
226+
),
227+
keyboardType: TextInputType.number,
228+
validator: FormBuilderValidators.compose([
229+
FormBuilderValidators.required(),
230+
FormBuilderValidators.numeric(),
231+
FormBuilderValidators.min(0),
232+
FormBuilderValidators.max(120),
233+
]),
234+
textInputAction: TextInputAction.done,
235+
autovalidateMode: AutovalidateMode.always,
236+
),
237+
],
238+
),
56239
),
57240
),
58241
);

0 commit comments

Comments
 (0)