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.
class TextFormFieldPage extends StatefulWidget {
@override
State<TextFormFieldPage> createState() => _TextFormFieldPageState();
}
class _TextFormFieldPageState extends State<TextFormFieldPage> {
final _key = GlobalKey<FormState>();
@override
Widget build(BuildContext context) => Form(
key: _key,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FTextFormField.email(
hint: 'janedoe@foruslabs.com',
autovalidateMode: AutovalidateMode.onUserInteraction,
validator: (value) => (value?.contains('@') ?? false) ? null : 'Please enter a valid email.',
),
const SizedBox(height: 10),
FTextFormField.password(
autovalidateMode: AutovalidateMode.onUserInteraction,
validator: (value) => 8 <= (value?.length ?? 0) ? null : 'Password must be at least 8 characters long.',
),
const SizedBox(height: 20),
FButton(
child: const Text('Login'),
onPress: () {
if (!_key.currentState!.validate()) {
return; // Form is invalid.
}
// Form is valid, do something.
},
),
],
),
);
}CLI
To generate and customize this style:
dart run forui style create text-fieldUsage
FTextFormField(...)
FTextFormField(
control: FTextFieldControl.managed(initial: TextEditingValue(text: '...')),
style: (style) => style.copyWith(...),
label: const Text('Email'),
hint: 'john@doe.com',
description: const Text('Enter your email associated with your Forui account.'),
keyboardType: TextInputType.emailAddress,
textCapitalization: TextCapitalization.none,
enabled: true,
clearable: (value) => value.text.isNotEmpty,
onSaved: (value) {},
onReset: () {},
validator: (value) => null,
autovalidateMode: AutovalidateMode.onUserInteraction,
forceErrorText: 'Error',
errorBuilder: (context, error) => Text(error),
);FTextFormField.email(...)
FTextFormField.email(
control: FTextFieldControl.managed(initial: TextEditingValue(text: '...')),
style: (style) => style.copyWith(...),
hint: 'john@doe.com',
description: const Text('Enter your email associated with your Forui account.'),
enabled: true,
clearable: (value) => value.text.isNotEmpty,
onSaved: (value) {},
onReset: () {},
validator: (value) => null,
autovalidateMode: AutovalidateMode.onUserInteraction,
forceErrorText: 'Error',
errorBuilder: (context, error) => Text(error),
);FTextFormField.password(...)
FTextFormField.password(
control: FTextFieldControl.managed(initial: TextEditingValue(text: '...')),
obscureTextControl: FObscureTextControl.managed(),
style: (style) => style.copyWith(...),
hint: 'Enter password',
description: const Text('Enter your password.'),
enabled: true,
clearable: (value) => value.text.isNotEmpty,
onSaved: (value) {},
onReset: () {},
validator: (value) => null,
autovalidateMode: AutovalidateMode.onUserInteraction,
forceErrorText: 'Error',
errorBuilder: (context, error) => Text(error),
);FTextFormField.multiline(...)
FTextFormField.multiline(
control: FTextFieldControl.managed(initial: TextEditingValue(text: '...')),
style: (style) => style.copyWith(...),
label: const Text('Description'),
hint: 'Enter description',
description: const Text('Enter your description.'),
enabled: true,
clearable: (value) => value.text.isNotEmpty,
onSaved: (value) {},
onReset: () {},
validator: (value) => null,
autovalidateMode: AutovalidateMode.onUserInteraction,
forceErrorText: 'Error',
errorBuilder: (context, error) => Text(error),
);