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      children: [
16        FTextFormField.email(
17          hint: 'janedoe@foruslabs.com',
18          validator: (value) => (value?.contains('@') ?? false)
19              ? null
20              : 'Please enter a valid email.',
21        ),
22        const SizedBox(height: 12),
23        FTextFormField.password(
24          validator: (value) => 8 <= (value?.length ?? 0)
25              ? null
26              : 'Password must be at least 8 characters long.',
27        ),
28        const SizedBox(height: 15),
29        FormField(
30          initialValue: false,
31          onSaved: (value) {
32            // Save values somewhere.
33          },
34          validator: (value) => (value ?? false)
35              ? null
36              : 'Please accept the terms and conditions.',
37          builder: (state) => FCheckbox(
38            label: const Text('Accept terms and conditions'),
39            description: const Text('You agree to our terms and conditions.'),
40            error: state.errorText == null ? null : Text(state.errorText!),
41            value: state.value ?? false,
42            onChange: (value) => state.didChange(value),
43          ),
44        ),
45        const SizedBox(height: 20),
46        FButton(
47          child: const Text('Register'),
48          onPress: () {
49            if (!_key.currentState!.validate()) {
50              // Handle errors here.
51              return;
52            }
53
54            _key.currentState!.save();
55            // Do something.
56          },
57        ),
58      ],
59    ),
60  );
61}
62

On this page