Skip to content

Commit 3d694df

Browse files
committed
Add PR 1106 radio behavior to checkbox
1 parent e518c0e commit 3d694df

File tree

3 files changed

+203
-6
lines changed

3 files changed

+203
-6
lines changed

example/lib/main.dart

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import 'package:example/sources/conditional_fields.dart';
22
import 'package:example/sources/dynamic_fields.dart';
3+
import 'package:example/sources/grouped_radio_checkbox.dart';
34
import 'package:example/sources/related_fields.dart';
45
import 'package:flutter/material.dart';
56
import 'package:flutter_localizations/flutter_localizations.dart';
@@ -141,6 +142,23 @@ class _HomePage extends StatelessWidget {
141142
);
142143
},
143144
),
145+
const Divider(),
146+
ListTile(
147+
title: const Text('GroupedRadio and GroupedCheckbox Orientation'),
148+
trailing: const Icon(Icons.arrow_right_sharp),
149+
onTap: () {
150+
Navigator.of(context).push(
151+
MaterialPageRoute(
152+
builder: (context) {
153+
return const CodePage(
154+
title: 'GroupedRadio and GroupedCheckbox',
155+
child: GroupedRadioCheckbox(),
156+
);
157+
},
158+
),
159+
);
160+
},
161+
),
144162
],
145163
),
146164
);
Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:flutter_form_builder/flutter_form_builder.dart';
3+
import 'package:form_builder_validators/form_builder_validators.dart';
4+
5+
class GroupedRadioCheckbox extends StatefulWidget {
6+
const GroupedRadioCheckbox({Key? key}) : super(key: key);
7+
8+
@override
9+
State<GroupedRadioCheckbox> createState() {
10+
return _GroupedRadioCheckbox();
11+
}
12+
}
13+
14+
class _GroupedRadioCheckbox extends State<GroupedRadioCheckbox> {
15+
bool autoValidate = true;
16+
bool readOnly = false;
17+
bool showSegmentedControl = true;
18+
final _formKey = GlobalKey<FormBuilderState>();
19+
20+
var genderOptions = ['Male', 'Female', 'Other'];
21+
22+
void _onChanged(dynamic val) => debugPrint(val.toString());
23+
24+
@override
25+
Widget build(BuildContext context) {
26+
return SingleChildScrollView(
27+
child: Column(
28+
children: <Widget>[
29+
FormBuilder(
30+
key: _formKey,
31+
// enabled: false,
32+
onChanged: () {
33+
_formKey.currentState!.save();
34+
debugPrint(_formKey.currentState!.value.toString());
35+
},
36+
autovalidateMode: AutovalidateMode.disabled,
37+
initialValue: const {
38+
'movie_rating': 5,
39+
'best_language': 'Dart',
40+
'age': '13',
41+
'gender': 'Male',
42+
'languages_filter': ['Dart']
43+
},
44+
skipDisabled: true,
45+
child: Column(
46+
children: <Widget>[
47+
//
48+
const SizedBox(height: 15),
49+
FormBuilderRadioGroup<String>(
50+
decoration: const InputDecoration(
51+
labelText: 'My chosen language',
52+
),
53+
initialValue: null,
54+
name: 'best_language_horiz',
55+
onChanged: _onChanged,
56+
separator: const SizedBox(
57+
width: 8.0,
58+
height: 8.0,
59+
child: DecoratedBox(
60+
decoration: BoxDecoration(color: Colors.red),
61+
),
62+
),
63+
validator: FormBuilderValidators.compose(
64+
[FormBuilderValidators.required()]),
65+
options: ['Dart', 'Kotlin', 'Java', 'Swift', 'Objective-C']
66+
.map((lang) => FormBuilderFieldOption(
67+
value: lang,
68+
child: Text(lang),
69+
))
70+
.toList(growable: false),
71+
controlAffinity: ControlAffinity.leading,
72+
orientation: OptionsOrientation.wrap,
73+
),
74+
//
75+
const SizedBox(height: 15),
76+
FormBuilderRadioGroup<String>(
77+
decoration: const InputDecoration(
78+
labelText: 'My chosen language',
79+
),
80+
initialValue: null,
81+
name: 'best_language_vert',
82+
onChanged: _onChanged,
83+
separator: const SizedBox(
84+
width: 8.0,
85+
height: 8.0,
86+
child: DecoratedBox(
87+
decoration: BoxDecoration(color: Colors.red),
88+
),
89+
),
90+
validator: FormBuilderValidators.compose(
91+
[FormBuilderValidators.required()]),
92+
options: ['Dart', 'Kotlin', 'Java', 'Swift', 'Objective-C']
93+
.map((lang) => FormBuilderFieldOption(
94+
value: lang,
95+
child: Text(lang),
96+
))
97+
.toList(growable: false),
98+
controlAffinity: ControlAffinity.leading,
99+
orientation: OptionsOrientation.vertical,
100+
),
101+
//
102+
const SizedBox(height: 15),
103+
FormBuilderCheckboxGroup<String>(
104+
autovalidateMode: AutovalidateMode.onUserInteraction,
105+
decoration: const InputDecoration(
106+
labelText: 'The language of my people'),
107+
name: 'languages_horiz',
108+
// initialValue: const ['Dart'],
109+
options: const [
110+
FormBuilderFieldOption(value: 'Dart'),
111+
FormBuilderFieldOption(value: 'Kotlin'),
112+
FormBuilderFieldOption(value: 'Java'),
113+
FormBuilderFieldOption(value: 'Swift'),
114+
FormBuilderFieldOption(value: 'Objective-C'),
115+
],
116+
onChanged: _onChanged,
117+
separator: const SizedBox(
118+
width: 8.0,
119+
height: 8.0,
120+
child: DecoratedBox(
121+
decoration: BoxDecoration(color: Colors.red),
122+
),
123+
),
124+
validator: FormBuilderValidators.compose([
125+
FormBuilderValidators.minLength(1),
126+
FormBuilderValidators.maxLength(3),
127+
]),
128+
orientation: OptionsOrientation.wrap,
129+
),
130+
//
131+
const SizedBox(height: 15),
132+
FormBuilderCheckboxGroup<String>(
133+
autovalidateMode: AutovalidateMode.onUserInteraction,
134+
decoration: const InputDecoration(
135+
labelText: 'The language of my people'),
136+
name: 'languages_vert',
137+
// initialValue: const ['Dart'],
138+
options: const [
139+
FormBuilderFieldOption(value: 'Dart'),
140+
FormBuilderFieldOption(value: 'Kotlin'),
141+
FormBuilderFieldOption(value: 'Java'),
142+
FormBuilderFieldOption(value: 'Swift'),
143+
FormBuilderFieldOption(value: 'Objective-C'),
144+
],
145+
onChanged: _onChanged,
146+
separator: const SizedBox(
147+
width: 8.0,
148+
height: 8.0,
149+
child: DecoratedBox(
150+
decoration: BoxDecoration(color: Colors.red),
151+
),
152+
),
153+
validator: FormBuilderValidators.compose([
154+
FormBuilderValidators.minLength(1),
155+
FormBuilderValidators.maxLength(3),
156+
]),
157+
orientation: OptionsOrientation.vertical,
158+
),
159+
],
160+
),
161+
),
162+
],
163+
),
164+
);
165+
}
166+
}

lib/src/widgets/grouped_checkbox.dart

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -287,13 +287,26 @@ class GroupedCheckbox<T> extends StatelessWidget {
287287
child: option,
288288
);
289289

290-
return Row(
290+
return Column(
291291
mainAxisSize: MainAxisSize.min,
292-
children: <Widget>[
293-
if (controlAffinity == ControlAffinity.leading) control,
294-
Flexible(flex: 1, child: label),
295-
if (controlAffinity == ControlAffinity.trailing) control,
296-
if (separator != null && index != options.length - 1) separator!,
292+
crossAxisAlignment: CrossAxisAlignment.start,
293+
children: [
294+
Row(
295+
mainAxisSize: MainAxisSize.min,
296+
children: <Widget>[
297+
if (controlAffinity == ControlAffinity.leading) control,
298+
Flexible(flex: 1, child: label),
299+
if (controlAffinity == ControlAffinity.trailing) control,
300+
if (orientation != OptionsOrientation.vertical &&
301+
separator != null &&
302+
index != options.length - 1)
303+
separator!,
304+
],
305+
),
306+
if (orientation == OptionsOrientation.vertical &&
307+
separator != null &&
308+
index != options.length - 1)
309+
separator!,
297310
],
298311
);
299312
}

0 commit comments

Comments
 (0)