Text Field

See FTextFormField for using text fields in forms.

1@override
2Widget build(BuildContext _) => const FTextField(
3  label: Text('Username'),
4  hint: 'JaneDoe',
5  description: Text('Please enter your username.'),
6);
7

CLI

To generate a specific style for customization:

dart run forui style create text-field-sizes

dart run forui style create text-field

Usage

`FTextField(...)`

1FTextField(
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  error: null,
9)

`FTextField.email(...)`

1FTextField.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  error: null,
9)

`FTextField.password(...)`

1FTextField.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)

`FTextField.multiline(...)`

1FTextField.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  error: null,
10)

Examples

States

Enabled

1@override
2Widget build(BuildContext _) => const FTextField(
3  label: Text('Username'),
4  hint: 'JaneDoe',
5  description: Text('Please enter your username.'),
6);
7

Disabled

1@override
2Widget build(BuildContext _) => const FTextField(
3  label: Text('Username'),
4  hint: 'JaneDoe',
5  description: Text('Please enter your username.'),
6  enabled: false,
7);
8

Clearable

1@override
2Widget build(BuildContext _) => FTextField(
3  control: const .managed(initial: TextEditingValue(text: 'MyUsername')),
4  label: const Text('Username'),
5  hint: 'JaneDoe',
6  description: const Text('Please enter your username.'),
7  clearable: (value) => value.text.isNotEmpty,
8);
9

Presets

Email

1@override
2Widget build(BuildContext _) => const FTextField.email(
3  control: .managed(initial: TextEditingValue(text: 'jane@doe.com')),
4);
5

Password

1@override
2Widget build(BuildContext _) => FTextField.password(
3  control: const .managed(initial: TextEditingValue(text: 'My password')),
4);
5

Multiline

1@override
2Widget build(BuildContext _) =>
3    const FTextField.multiline(label: Text('Leave a review'), maxLines: 4);
4

On this page