Skip to content

Commit 52cf16e

Browse files
deandreamatiasdeandreamatias
committed
feat: add properties to checkbox and switch
1 parent 4531d64 commit 52cf16e

File tree

2 files changed

+304
-13
lines changed

2 files changed

+304
-13
lines changed

‎lib/src/fields/form_builder_cupertino_checkbox.dart

Lines changed: 48 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -45,10 +45,13 @@ class FormBuilderCupertinoCheckbox extends FormBuilderField<bool> {
4545
/// [prefix] and [child]. If null, the row is shorter.
4646
final Widget? Function(String error)? errorBuilder;
4747

48-
/// The color to use when this radio button is not selected.
48+
/// {@macro flutter.cupertino.CupertinoCheckbox.fillColor}
4949
///
50-
/// Defaults to [CupertinoColors.white].
51-
final Color? inactiveColor;
50+
/// If [fillColor] resolves to null for the requested state, then the fill color
51+
/// falls back to [activeColor] if the state includes [WidgetState.selected],
52+
/// [CupertinoColors.white] at 50% opacity if checkbox is disabled,
53+
/// and [CupertinoColors.white] otherwise.
54+
final WidgetStateProperty<Color?>? fillColor;
5255

5356
/// The color for the radio's border when it has the input focus.
5457
///
@@ -85,6 +88,40 @@ class FormBuilderCupertinoCheckbox extends FormBuilderField<bool> {
8588
/// [RoundedRectangleBorder] with a circular corner radius of 4.0.
8689
final OutlinedBorder? shape;
8790

91+
/// The semantic label for the checkbox that will be announced by screen readers.
92+
///
93+
/// This is announced by assistive technologies (e.g TalkBack/VoiceOver).
94+
///
95+
/// This label does not show in the UI.
96+
final String? semanticLabel;
97+
98+
/// {@macro flutter.widgets.Focus.autofocus}
99+
final bool autofocus;
100+
101+
/// The cursor for a mouse pointer when it enters or is hovering over the
102+
/// widget.
103+
///
104+
/// If [mouseCursor] is a [WidgetStateMouseCursor],
105+
/// [WidgetStateProperty.resolve] is used for the following [WidgetState]s:
106+
///
107+
/// * [WidgetState.selected].
108+
/// * [WidgetState.focused].
109+
/// * [WidgetState.disabled].
110+
///
111+
/// When [value] is null and [tristate] is true, [WidgetState.selected] is
112+
/// included as a state.
113+
///
114+
/// If null, then [SystemMouseCursors.basic] is used when this checkbox is
115+
/// disabled. When the checkbox is enabled, [SystemMouseCursors.click] is used
116+
/// on Web, and [SystemMouseCursors.basic] is used on other platforms.
117+
///
118+
/// See also:
119+
///
120+
/// * [WidgetStateMouseCursor], a [MouseCursor] that implements
121+
/// [WidgetStateProperty] which is used in APIs that need to accept
122+
/// either a [MouseCursor] or a [WidgetStateProperty].
123+
final MouseCursor? mouseCursor;
124+
88125
/// Creates On/Off Cupertino switch field
89126
FormBuilderCupertinoCheckbox({
90127
super.key,
@@ -106,24 +143,30 @@ class FormBuilderCupertinoCheckbox extends FormBuilderField<bool> {
106143
this.contentPadding,
107144
this.prefix,
108145
this.focusColor,
109-
this.inactiveColor,
146+
this.fillColor,
110147
this.checkColor,
111148
this.shape,
112149
this.side,
113150
this.tristate = false,
151+
this.semanticLabel,
152+
this.autofocus = false,
153+
this.mouseCursor,
114154
}) : super(
115155
builder: (FormFieldState<bool?> field) {
116156
final state = field as _FormBuilderCupertinoCheckboxState;
117157

118158
final fieldWidget = CupertinoCheckbox(
119159
focusColor: focusColor,
120160
focusNode: state.effectiveFocusNode,
121-
inactiveColor: inactiveColor,
161+
fillColor: fillColor,
122162
value: state.value ?? false,
123163
checkColor: checkColor,
124164
shape: shape,
125165
side: side,
126166
tristate: tristate,
167+
autofocus: autofocus,
168+
mouseCursor: mouseCursor,
169+
semanticLabel: semanticLabel,
127170
onChanged: state.enabled
128171
? (value) {
129172
field.didChange(value);

‎lib/src/fields/form_builder_cupertino_switch.dart

Lines changed: 256 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,238 @@ import 'package:flutter_form_builder/flutter_form_builder.dart';
55

66
/// On/Off Cupertino switch field
77
class FormBuilderCupertinoSwitch extends FormBuilderField<bool> {
8-
/// The color to use when this switch is on.
8+
/// The color to use for the track when the switch is on.
99
///
10-
/// Defaults to [CupertinoColors.systemGreen] when null and ignores
11-
/// the [CupertinoTheme] in accordance to native iOS behavior.
12-
final Color? activeColor;
10+
/// If null and [applyTheme] is false, defaults to [CupertinoColors.systemGreen]
11+
/// in accordance to native iOS behavior. Otherwise, defaults to
12+
/// [CupertinoThemeData.primaryColor].
13+
///
14+
/// See also:
15+
///
16+
/// * [inactiveTrackColor], the color to use for the track when the switch is off.
17+
final Color? activeTrackColor;
1318

1419
/// The color to use for the background when the switch is off.
1520
///
1621
/// Defaults to [CupertinoColors.secondarySystemFill] when null.
1722
final Color? trackColor;
1823

19-
/// The color to use for the thumb of the switch.
24+
/// The color to use on the thumb when the switch is off.
25+
///
26+
/// If this color is not opaque, it is blended against
27+
/// [CupertinoThemeData.scaffoldBackgroundColor], so as not to see through the
28+
/// thumb to the track underneath.
29+
///
30+
/// If null, defaults to [thumbColor]. If that is also null,
31+
/// [CupertinoColors.white] is used.
32+
///
33+
/// See also:
34+
///
35+
/// * [thumbColor], the color to use for the thumb when the switch is on.
36+
final Color? inactiveThumbColor;
37+
38+
/// The color to use for the focus highlight for keyboard interactions.
39+
///
40+
/// Defaults to [activeColor] with an opacity of 0.80, a brightness of 0.69
41+
/// and a saturation of 0.835.
42+
final Color? focusColor;
43+
44+
/// The color to use for the accessibility label when the switch is on.
2045
///
2146
/// Defaults to [CupertinoColors.white] when null.
47+
final Color? onLabelColor;
48+
49+
/// The color to use for the accessibility label when the switch is off.
50+
///
51+
/// Defaults to [Color.fromARGB(255, 179, 179, 179)]
52+
/// (or [Color.fromARGB(255, 255, 255, 255)] in high contrast) when null.
53+
final Color? offLabelColor;
54+
55+
/// {@macro flutter.material.switch.activeThumbImage}
56+
final ImageProvider? activeThumbImage;
57+
58+
/// {@macro flutter.material.switch.onActiveThumbImageError}
59+
final ImageErrorListener? onActiveThumbImageError;
60+
61+
/// {@macro flutter.material.switch.inactiveThumbImage}
62+
final ImageProvider? inactiveThumbImage;
63+
64+
/// {@macro flutter.material.switch.onInactiveThumbImageError}
65+
final ImageErrorListener? onInactiveThumbImageError;
66+
67+
/// Handler called when the focus changes.
68+
///
69+
/// Called with true if this widget's node gains focus, and false if it loses
70+
/// focus.
71+
final ValueChanged<bool>? onFocusChange;
72+
73+
/// {@macro flutter.widgets.Focus.autofocus}
74+
final bool autofocus;
75+
76+
/// {@template flutter.cupertino.CupertinoSwitch.applyTheme}
77+
/// Whether to apply the ambient [CupertinoThemeData].
78+
///
79+
/// If true, the track uses [CupertinoThemeData.primaryColor] for the track
80+
/// when the switch is on.
81+
///
82+
/// Defaults to [CupertinoThemeData.applyThemeToAll].
83+
/// {@endtemplate}
84+
final bool? applyTheme;
85+
86+
/// The color to use for the track when the switch is off.
87+
///
88+
/// Defaults to [CupertinoColors.secondarySystemFill] when null.
89+
///
90+
/// See also:
91+
///
92+
/// * [activeTrackColor], the color to use for the track when the switch is on.
93+
final Color? inactiveTrackColor;
94+
95+
/// The color to use for the thumb when the switch is on.
96+
///
97+
/// If this color is not opaque, it is blended against
98+
/// [CupertinoThemeData.scaffoldBackgroundColor], so as not to see through the
99+
/// thumb to the track underneath.
100+
///
101+
/// Defaults to [CupertinoColors.white] when null.
102+
///
103+
/// See also:
104+
///
105+
/// * [inactiveThumbColor], the color to use for the thumb when the switch is off.
22106
final Color? thumbColor;
23107

108+
/// The cursor for a mouse pointer when it enters or is hovering over the
109+
/// widget.
110+
///
111+
/// Resolved in the following states:
112+
/// * [WidgetState.selected].
113+
/// * [WidgetState.hovered].
114+
/// * [WidgetState.focused].
115+
/// * [WidgetState.disabled].
116+
///
117+
/// {@tool snippet}
118+
/// This example resolves the [mouseCursor] based on the current
119+
/// [WidgetState] of the [CupertinoSwitch], providing a different [mouseCursor] when it is
120+
/// [WidgetState.disabled].
121+
///
122+
/// ```dart
123+
/// CupertinoSwitch(
124+
/// value: true,
125+
/// onChanged: (bool value) { },
126+
/// mouseCursor: WidgetStateProperty.resolveWith<MouseCursor>((Set<WidgetState> states) {
127+
/// if (states.contains(WidgetState.disabled)) {
128+
/// return SystemMouseCursors.click;
129+
/// }
130+
/// return SystemMouseCursors.basic; // All other states will use the default mouseCursor.
131+
/// }),
132+
/// )
133+
/// ```
134+
/// {@end-tool}
135+
///
136+
/// If null, then [MouseCursor.defer] is used when the switch is disabled.
137+
/// When the switch is enabled, [SystemMouseCursors.click] is used on Web, and
138+
/// [MouseCursor.defer] is used on other platforms.
139+
///
140+
/// See also:
141+
///
142+
/// * [WidgetStateMouseCursor], a [MouseCursor] that implements
143+
/// `WidgetStateProperty` which is used in APIs that need to accept
144+
/// either a [MouseCursor] or a [WidgetStateProperty].
145+
final WidgetStateProperty<MouseCursor>? mouseCursor;
146+
147+
/// The outline color of this [CupertinoSwitch]'s track.
148+
///
149+
/// Resolved in the following states:
150+
/// * [WidgetState.selected].
151+
/// * [WidgetState.hovered].
152+
/// * [WidgetState.focused].
153+
/// * [WidgetState.disabled].
154+
///
155+
/// {@tool snippet}
156+
/// This example resolves the [trackOutlineColor] based on the current
157+
/// [WidgetState] of the [CupertinoSwitch], providing a different [Color] when it is
158+
/// [WidgetState.disabled].
159+
///
160+
/// ```dart
161+
/// CupertinoSwitch(
162+
/// value: true,
163+
/// onChanged: (bool value) { },
164+
/// trackOutlineColor: WidgetStateProperty.resolveWith<Color?>((Set<WidgetState> states) {
165+
/// if (states.contains(WidgetState.disabled)) {
166+
/// return CupertinoColors.activeOrange.withOpacity(.48);
167+
/// }
168+
/// return null; // Use the default color.
169+
/// }),
170+
/// )
171+
/// ```
172+
/// {@end-tool}
173+
///
174+
/// The [CupertinoSwitch] track has no outline by default.
175+
final WidgetStateProperty<Color?>? trackOutlineColor;
176+
177+
/// The outline width of this [CupertinoSwitch]'s track.
178+
///
179+
/// Resolved in the following states:
180+
/// * [WidgetState.selected].
181+
/// * [WidgetState.hovered].
182+
/// * [WidgetState.focused].
183+
/// * [WidgetState.disabled].
184+
///
185+
/// {@tool snippet}
186+
/// This example resolves the [trackOutlineWidth] based on the current
187+
/// [WidgetState] of the [CupertinoSwitch], providing a different outline width when it is
188+
/// [WidgetState.disabled].
189+
///
190+
/// ```dart
191+
/// CupertinoSwitch(
192+
/// value: true,
193+
/// onChanged: (bool value) { },
194+
/// trackOutlineWidth: WidgetStateProperty.resolveWith<double?>((Set<WidgetState> states) {
195+
/// if (states.contains(WidgetState.disabled)) {
196+
/// return 5.0;
197+
/// }
198+
/// return null; // Use the default width.
199+
/// }),
200+
/// )
201+
/// ```
202+
/// {@end-tool}
203+
///
204+
/// Since a [CupertinoSwitch] has no track outline by default, this parameter
205+
/// is set only if [trackOutlineColor] is provided.
206+
///
207+
/// Defaults to 2.0 if a [trackOutlineColor] is provided.
208+
final WidgetStateProperty<double?>? trackOutlineWidth;
209+
210+
/// The icon to use on the thumb of this switch.
211+
///
212+
/// Resolved in the following states:
213+
/// * [WidgetState.selected].
214+
/// * [WidgetState.hovered].
215+
/// * [WidgetState.focused].
216+
/// * [WidgetState.disabled].
217+
///
218+
/// {@tool snippet}
219+
/// This example resolves the [thumbIcon] based on the current
220+
/// [WidgetState] of the [CupertinoSwitch], providing a different [Icon] when it is
221+
/// [WidgetState.disabled].
222+
///
223+
/// ```dart
224+
/// CupertinoSwitch(
225+
/// value: true,
226+
/// onChanged: (bool value) { },
227+
/// thumbIcon: WidgetStateProperty.resolveWith<Icon?>((Set<WidgetState> states) {
228+
/// if (states.contains(WidgetState.disabled)) {
229+
/// return const Icon(Icons.close);
230+
/// }
231+
/// return null; // All other states will use the default thumbIcon.
232+
/// }),
233+
/// )
234+
/// ```
235+
/// {@end-tool}
236+
///
237+
/// If null, then the [CupertinoSwitch] does not have any icons on the thumb.
238+
final WidgetStateProperty<Icon?>? thumbIcon;
239+
24240
/// {@template flutter.cupertino.CupertinoSwitch.dragStartBehavior}
25241
/// Determines the way that drag start behavior is handled.
26242
///
@@ -94,7 +310,7 @@ class FormBuilderCupertinoSwitch extends FormBuilderField<bool> {
94310
super.onReset,
95311
super.focusNode,
96312
super.restorationId,
97-
this.activeColor,
313+
this.activeTrackColor,
98314
this.dragStartBehavior = DragStartBehavior.start,
99315
this.trackColor,
100316
this.thumbColor,
@@ -103,6 +319,22 @@ class FormBuilderCupertinoSwitch extends FormBuilderField<bool> {
103319
this.helper,
104320
this.contentPadding,
105321
this.prefix,
322+
this.focusColor,
323+
this.inactiveThumbColor,
324+
this.onLabelColor,
325+
this.offLabelColor,
326+
this.activeThumbImage,
327+
this.onActiveThumbImageError,
328+
this.inactiveThumbImage,
329+
this.onInactiveThumbImageError,
330+
this.onFocusChange,
331+
this.autofocus = false,
332+
this.applyTheme,
333+
this.inactiveTrackColor,
334+
this.mouseCursor,
335+
this.trackOutlineColor,
336+
this.trackOutlineWidth,
337+
this.thumbIcon,
106338
}) : super(
107339
builder: (FormFieldState<bool?> field) {
108340
final state = field as _FormBuilderCupertinoSwitchState;
@@ -114,10 +346,26 @@ class FormBuilderCupertinoSwitch extends FormBuilderField<bool> {
114346
field.didChange(value);
115347
}
116348
: null,
117-
activeColor: activeColor,
118349
dragStartBehavior: dragStartBehavior,
119350
thumbColor: thumbColor,
120-
trackColor: trackColor,
351+
activeTrackColor: activeTrackColor,
352+
activeThumbImage: activeThumbImage,
353+
inactiveThumbImage: inactiveThumbImage,
354+
applyTheme: applyTheme,
355+
autofocus: autofocus,
356+
focusColor: focusColor,
357+
focusNode: focusNode,
358+
inactiveThumbColor: inactiveThumbColor,
359+
inactiveTrackColor: inactiveTrackColor,
360+
mouseCursor: mouseCursor,
361+
onActiveThumbImageError: onActiveThumbImageError,
362+
onInactiveThumbImageError: onInactiveThumbImageError,
363+
offLabelColor: offLabelColor,
364+
onLabelColor: onLabelColor,
365+
onFocusChange: onFocusChange,
366+
thumbIcon: thumbIcon,
367+
trackOutlineColor: trackOutlineColor,
368+
trackOutlineWidth: trackOutlineWidth,
121369
);
122370
return CupertinoFormRow(
123371
error: state.hasError

0 commit comments

Comments
 (0)