Form
Text Form Field
A text field that can be used in forms, allowing the user to enter text, either with a hardware keyboard or with an onscreen keyboard.
FTextFormField wraps FTextField and provides a
FormField.
1class TextFormFieldExample extends StatefulWidget {2 @override3 State<TextFormFieldExample> createState() => _TextFormFieldExampleState();4}56class _TextFormFieldExampleState extends State<TextFormFieldExample> {7 final _key = GlobalKey<FormState>();89 @override10 Widget build(BuildContext _) => Form(11 key: _key,12 child: Column(13 mainAxisAlignment: .center,14 children: [15 FTextFormField.email(16 hint: 'janedoe@foruslabs.com',17 autovalidateMode: .onUserInteraction,18 validator: (value) => (value?.contains('@') ?? false)19 ? null20 : 'Please enter a valid email.',21 ),22 const SizedBox(height: 10),23 FTextFormField.password(24 autovalidateMode: .onUserInteraction,25 validator: (value) => 8 <= (value?.length ?? 0)26 ? null27 : 'Password must be at least 8 characters long.',28 ),29 const SizedBox(height: 20),30 FButton(31 child: const Text('Login'),32 onPress: () {33 if (!_key.currentState!.validate()) {34 return; // Form is invalid.35 }3637 // Form is valid, do something.38 },39 ),40 ],41 ),42 );43}44CLI
To generate and customize this style:
dart run forui style create text-fieldUsage
FTextFormField(...)
1FTextFormField(2 style: const .delta(contentPadding: .symmetric(horizontal: 10)),3 enabled: true,4 label: const Text('Label'),5 hint: 'Enter text...',6 description: const Text('Description'),7)FTextFormField.email(...)
1FTextFormField.email(2 style: const .delta(contentPadding: .symmetric(horizontal: 10)),3 enabled: true,4 label: const Text('Email'),5 hint: 'Enter email...',6 description: const Text('Description'),7)FTextFormField.password(...)
1FTextFormField.password(2 style: const .delta(contentPadding: .symmetric(horizontal: 10)),3 enabled: true,4 label: const Text('Password'),5 hint: 'Enter password...',6 description: const Text('Description'),7 error: null,8)FTextFormField.multiline(...)
1FTextFormField.multiline(2 style: const .delta(contentPadding: .symmetric(horizontal: 10)),3 statesController: null,4 enabled: true,5 label: const Text('Label'),6 hint: 'Enter text...',7 description: const Text('Description'),8)