Checkbox

For touch devices, a switch is generally recommended over this.

We recommend using a select group to create a group of checkboxes.

1class CheckboxExample extends StatefulWidget {
2  @override
3  State<CheckboxExample> createState() => _CheckboxExampleState();
4}
5
6class _CheckboxExampleState extends State<CheckboxExample> {
7  bool _state = false;
8
9  @override
10  Widget build(BuildContext _) => FCheckbox(
11    label: const Text('Accept terms and conditions'),
12    description: const Text('You agree to our terms and conditions.'),
13    semanticsLabel: 'Accept terms and conditions',
14    value: _state,
15    onChange: (value) => setState(() => _state = value),
16  );
17}
18

CLI

To generate and customize this style:

dart run forui style create checkbox

Usage

`FCheckbox(...)`

1FCheckbox(
2  style: const .delta(size: 20),
3  enabled: true,
4  value: false,
5  onChange: (value) {},
6  label: const Text('Accept terms'),
7  description: const Text('You agree to our terms of service'),
8  error: null,
9)

Examples

Disabled

1class DisabledCheckboxExample extends StatefulWidget {
2  @override
3  State<DisabledCheckboxExample> createState() =>
4      _DisabledCheckboxExampleState();
5}
6
7class _DisabledCheckboxExampleState extends State<DisabledCheckboxExample> {
8  bool _state = true;
9
10  @override
11  Widget build(BuildContext _) => FCheckbox(
12    label: const Text('Accept terms and conditions'),
13    description: const Text('You agree to our terms and conditions.'),
14    semanticsLabel: 'Accept terms and conditions',
15    value: _state,
16    onChange: (value) => setState(() => _state = value),
17    enabled: false,
18  );
19}
20

Error

1class ErrorCheckboxExample extends StatefulWidget {
2  @override
3  State<ErrorCheckboxExample> createState() => _ErrorCheckboxExampleState();
4}
5
6class _ErrorCheckboxExampleState extends State<ErrorCheckboxExample> {
7  bool _state = false;
8
9  @override
10  Widget build(BuildContext _) => FCheckbox(
11    label: const Text('Accept terms and conditions'),
12    description: const Text('You agree to our terms and conditions.'),
13    error: const Text('Please accept the terms and conditions.'),
14    semanticsLabel: 'Accept terms and conditions',
15    value: _state,
16    onChange: (value) => setState(() => _state = value),
17  );
18}
19

Without Label

1class RawCheckboxExample extends StatefulWidget {
2  @override
3  State<RawCheckboxExample> createState() => _RawCheckboxExampleState();
4}
5
6class _RawCheckboxExampleState extends State<RawCheckboxExample> {
7  bool _state = false;
8
9  @override
10  Widget build(BuildContext _) => FCheckbox(
11    value: _state,
12    onChange: (value) => setState(() => _state = value),
13  );
14}
15

Form

1class FormCheckboxExample extends StatefulWidget {
2  @override
3  State<FormCheckboxExample> createState() => _FormCheckboxExampleState();
4}
5
6class _FormCheckboxExampleState extends State<FormCheckboxExample> {
7  final _key = GlobalKey<FormState>();
8
9  @override
10  Widget build(BuildContext _) => Form(
11    key: _key,
12    child: Column(
13      mainAxisAlignment: .center,
14      crossAxisAlignment: .start,
15      spacing: 16,
16      children: [
17        FTextFormField.email(
18          hint: 'janedoe@foruslabs.com',
19          validator: (value) => (value?.contains('@') ?? false)
20              ? null
21              : 'Please enter a valid email.',
22        ),
23        const SizedBox(height: 12),
24        FTextFormField.password(
25          validator: (value) => 8 <= (value?.length ?? 0)
26              ? null
27              : 'Password must be at least 8 characters long.',
28        ),
29        const SizedBox(height: 15),
30        FormField(
31          initialValue: false,
32          onSaved: (value) {
33            // Save values somewhere.
34          },
35          validator: (value) => (value ?? false)
36              ? null
37              : 'Please accept the terms and conditions.',
38          builder: (state) => FCheckbox(
39            label: const Text('Accept terms and conditions'),
40            description: const Text('You agree to our terms and conditions.'),
41            error: state.errorText == null ? null : Text(state.errorText!),
42            value: state.value ?? false,
43            onChange: (value) => state.didChange(value),
44          ),
45        ),
46        Row(
47          mainAxisAlignment: .end,
48          children: [
49            FButton(
50              size: .sm,
51              mainAxisSize: .min,
52              child: const Text('Register'),
53              onPress: () {
54                if (_key.currentState!.validate()) {
55                  // Form is valid, do something.
56                }
57              },
58            ),
59          ],
60        ),
61      ],
62    ),
63  );
64}
65

On this page