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.
FLabel(
axis: Axis.horizontal,
label: const Text('Accept terms and conditions'),
description: const Text('You agree to our terms and conditions.'),
error: const Text('Please accept the terms.'),
child: const DecoratedBox(
decoration: BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(5)), color: Colors.grey),
child: SizedBox(width: 16, height: 16),
),
);CLI
To generate and customize this style:
dart run forui style create labelUsage
FLabel(...)
FLabel(
axis: Axis.horizontal,
child: const Placeholder(),
style: (style) => style.copyWith(...),
label: const Text('Accept terms and conditions'),
description: const Text('You agree to our terms and conditions.'),
error: const Text('Please accept the terms and conditions.'),
expands: false,
states: {WidgetState.error},
);Examples
Vertical
FLabel(
axis: Axis.vertical,
label: const Text('Email'),
description: const Text('Enter your email address.'),
error: const Text('Please enter a valid email address.'),
child: const DecoratedBox(
decoration: BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(5)), color: Colors.grey),
child: SizedBox(width: 250, height: 30),
),
);Disabled
FLabel(
axis: Axis.horizontal,
label: const Text('Accept terms and conditions'),
description: const Text('You agree to our terms and conditions.'),
error: const Text('Please accept the terms.'),
states: {WidgetState.disabled},
child: const DecoratedBox(
decoration: BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(5)), color: Colors.grey),
child: SizedBox(width: 16, height: 16),
),
);Error
FLabel(
axis: Axis.horizontal,
label: const Text('Accept terms and conditions'),
description: const Text('You agree to our terms and conditions.'),
error: const Text('Please accept the terms.'),
states: {WidgetState.error},
child: const DecoratedBox(
decoration: BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(5)), color: Colors.grey),
child: SizedBox(width: 16, height: 16),
),
);