Form

Label

Describes a form field with a label, description, and error message (if any). This widget is usually used for custom form fields. All form fields in Forui come with this widget wrapped.

API Reference
1@override
2Widget build(BuildContext _) => const FLabel(
3 axis: .horizontal,
4 label: Text('Accept terms and conditions'),
5 description: Text('You agree to our terms and conditions.'),
6 error: Text('Please accept the terms.'),
7 child: DecoratedBox(
8 decoration: BoxDecoration(
9 borderRadius: .all(.circular(5)),
10 color: Colors.grey,
11 ),
12 child: SizedBox.square(dimension: 16),
13 ),
14);
15

CLI

To generate and customize this style:

dart run forui style create label

Usage

FLabel(...)

1FLabel(
2 style: .delta(labelPadding: .zero),
3 axis: .vertical,
4 expands: false,
5 variants: {},
6 label: Text('Label'),
7 description: Text('Description'),
8 error: Text('Error message'),
9 child: Placeholder(),
10)

Examples

Vertical

1@override
2Widget build(BuildContext _) => const FLabel(
3 axis: .vertical,
4 label: Text('Email'),
5 description: Text('Enter your email address.'),
6 error: Text('Please enter a valid email address.'),
7 child: DecoratedBox(
8 decoration: BoxDecoration(
9 borderRadius: .all(.circular(5)),
10 color: Colors.grey,
11 ),
12 child: SizedBox(width: 250, height: 30),
13 ),
14);
15

Disabled

1@override
2Widget build(BuildContext _) => FLabel(
3 axis: .horizontal,
4 label: const Text('Accept terms and conditions'),
5 description: const Text('You agree to our terms and conditions.'),
6 error: const Text('Please accept the terms.'),
7 variants: {.disabled},
8 child: const DecoratedBox(
9 decoration: BoxDecoration(
10 borderRadius: .all(.circular(5)),
11 color: Colors.grey,
12 ),
13 child: SizedBox.square(dimension: 16),
14 ),
15);
16

Error

1@override
2Widget build(BuildContext _) => FLabel(
3 axis: .horizontal,
4 label: const Text('Accept terms and conditions'),
5 description: const Text('You agree to our terms and conditions.'),
6 error: const Text('Please accept the terms.'),
7 variants: {.error},
8 child: const DecoratedBox(
9 decoration: BoxDecoration(
10 borderRadius: .all(.circular(5)),
11 color: Colors.grey,
12 ),
13 child: SizedBox.square(dimension: 16),
14 ),
15);
16

Date Field

A date field allows a date to be selected from a calendar or input field.

Multi Select

A multi select displays a list of drop-down options for the user to pick from. It is a form-field and can therefore be used in a form.

On this page

CLI
Usage
FLabel(...)
Examples
Vertical
Disabled
Error