Switch

1class SwitchExample extends StatefulWidget {
2  @override
3  State<SwitchExample> createState() => _SwitchExampleState();
4}
5
6class _SwitchExampleState extends State<SwitchExample> {
7  bool _state = false;
8
9  @override
10  Widget build(BuildContext _) => FSwitch(
11    label: const Text('Airplane Mode'),
12    semanticsLabel: 'Airplane Mode',
13    value: _state,
14    onChange: (value) => setState(() => _state = value),
15  );
16}
17

CLI

To generate and customize this style:

dart run forui style create switch

Usage

`FSwitch(...)`

1FSwitch(
2  style: const .delta(labelPadding: .only(left: 8)),
3  enabled: true,
4  value: false,
5  onChange: (value) {},
6  dragStartBehavior: .start,
7  label: const Text('Enable notifications'),
8  description: const Text('Receive push notifications'),
9  error: null,
10)

Examples

Disabled

1class DisabledSwitchExample extends StatefulWidget {
2  @override
3  State<DisabledSwitchExample> createState() => _DisabledSwitchExampleState();
4}
5
6class _DisabledSwitchExampleState extends State<DisabledSwitchExample> {
7  bool _state = false;
8
9  @override
10  Widget build(BuildContext _) => FSwitch(
11    label: const Text('Airplane Mode'),
12    semanticsLabel: 'Airplane Mode',
13    value: _state,
14    onChange: (value) => setState(() => _state = value),
15    enabled: false,
16  );
17}
18

Form

1class FormSwitchExample extends StatefulWidget {
2  @override
3  State<FormSwitchExample> createState() => _FormSwitchExampleState();
4}
5
6class _FormSwitchExampleState extends State<FormSwitchExample> {
7  final GlobalKey<FormState> _key = GlobalKey<FormState>();
8
9  @override
10  Widget build(BuildContext context) {
11    final theme = context.theme;
12    return Form(
13      key: _key,
14      child: Column(
15        mainAxisAlignment: .center,
16        crossAxisAlignment: .start,
17        children: [
18          Text(
19            'Email Notifications',
20            style: theme.typography.xl2.copyWith(
21              fontWeight: FontWeight.w600,
22              color: theme.colors.foreground,
23              height: 1.5,
24            ),
25          ),
26          const SizedBox(height: 15),
27          FCard.raw(
28            child: Padding(
29              padding: const .fromLTRB(16, 12, 16, 16),
30              child: Row(
31                mainAxisAlignment: .spaceBetween,
32                children: [
33                  Flexible(
34                    child: Column(
35                      crossAxisAlignment: .start,
36                      children: [
37                        Text(
38                          'Marketing Emails',
39                          style: theme.typography.base.copyWith(
40                            fontWeight: .w500,
41                            color: theme.colors.foreground,
42                            height: 1.5,
43                          ),
44                        ),
45                        Text(
46                          'Receive emails about new products, features, and more.',
47                          style: theme.typography.sm.copyWith(
48                            color: theme.colors.mutedForeground,
49                          ),
50                        ),
51                      ],
52                    ),
53                  ),
54                  FormField(
55                    initialValue: false,
56                    onSaved: (value) {
57                      // Save values somewhere.
58                    },
59                    validator: (value) => null, // No validation required.
60                    builder: (state) => FSwitch(
61                      value: state.value ?? false,
62                      onChange: (value) => state.didChange(value),
63                    ),
64                  ),
65                ],
66              ),
67            ),
68          ),
69          const SizedBox(height: 12),
70          FCard.raw(
71            child: Padding(
72              padding: const .fromLTRB(16, 12, 16, 16),
73              child: Row(
74                mainAxisAlignment: .spaceBetween,
75                children: [
76                  Flexible(
77                    child: Column(
78                      crossAxisAlignment: .start,
79                      children: [
80                        Text(
81                          'Security emails',
82                          style: theme.typography.base.copyWith(
83                            fontWeight: .w500,
84                            color: theme.colors.foreground,
85                            height: 1.5,
86                          ),
87                        ),
88                        Text(
89                          'Receive emails about your account security.',
90                          style: theme.typography.sm.copyWith(
91                            color: theme.colors.mutedForeground,
92                          ),
93                        ),
94                      ],
95                    ),
96                  ),
97                  FormField(
98                    initialValue: true,
99                    onSaved: (value) {
100                      // Save values somewhere.
101                    },
102                    validator: (value) => null, // No validation required.
103                    builder: (state) => FSwitch(
104                      value: state.value ?? false,
105                      onChange: (value) => state.didChange(value),
106                    ),
107                  ),
108                ],
109              ),
110            ),
111          ),
112          const SizedBox(height: 30),
113          FButton(
114            child: const Text('Submit'),
115            onPress: () {
116              if (!_key.currentState!.validate()) {
117                // Handle errors here.
118                return;
119              }
120
121              _key.currentState!.save();
122              // Do something.
123            },
124          ),
125        ],
126      ),
127    );
128  }
129}
130

CLI

Usage

FSwitch(...)

Examples

Disabled

Form

On this page

`FSwitch(...)`