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 and customize this style:

dart run forui style create text-field

Usage

`FTextField(...)`

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

`FTextField.email(...)`

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

`FTextField.password(...)`

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

`FTextField.multiline(...)`

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

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