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: 16),30 Row(31 mainAxisAlignment: .end,32 children: [33 FButton(34 size: .sm,35 mainAxisSize: .min,36 child: const Text('Login'),37 onPress: () {38 if (_key.currentState!.validate()) {39 // Form is valid, do something.40 }41 },42 ),43 ],44 ),45 ],46 ),47 );48}49CLI
To generate a specific style for customization:
dart run forui style create text-field-sizesdart run forui style create text-fieldUsage
FTextFormField(...)
1FTextFormField(2 size: .md,3 style: const .delta(contentPadding: .value(.symmetric(horizontal: 10))),4 enabled: true,5 label: const Text('Label'),6 hint: 'Enter text...',7 description: const Text('Description'),8)FTextFormField.email(...)
1FTextFormField.email(2 size: .md,3 style: const .delta(contentPadding: .value(.symmetric(horizontal: 10))),4 enabled: true,5 label: const Text('Email'),6 hint: 'Enter email...',7 description: const Text('Description'),8)FTextFormField.password(...)
1FTextFormField.password(2 size: .md,3 style: const .delta(contentPadding: .value(.symmetric(horizontal: 10))),4 enabled: true,5 label: const Text('Password'),6 hint: 'Enter password...',7 description: const Text('Description'),8 error: null,9)FTextFormField.multiline(...)
1FTextFormField.multiline(2 size: .md,3 style: const .delta(contentPadding: .value(.symmetric(horizontal: 10))),4 statesController: null,5 enabled: true,6 label: const Text('Label'),7 hint: 'Enter text...',8 description: const Text('Description'),9)