Skip to content

Commit 4e6812a

Browse files
deandreamatiasdeandreamatias
authored
Merge branch 'main' into patch-1
2 parents 743d42e + 7f542eb commit 4e6812a

9 files changed

+684
-14
lines changed

‎example/lib/main.dart

Lines changed: 42 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import 'package:example/sources/conditional_fields.dart';
2+
import 'package:example/sources/decorated_radio_checkbox.dart';
23
import 'package:example/sources/dynamic_fields.dart';
4+
import 'package:example/sources/grouped_radio_checkbox.dart';
35
import 'package:example/sources/related_fields.dart';
46
import 'package:flutter/material.dart';
57
import 'package:flutter_localizations/flutter_localizations.dart';
@@ -17,16 +19,19 @@ class MyApp extends StatelessWidget {
1719

1820
@override
1921
Widget build(BuildContext context) {
20-
return const MaterialApp(
22+
return MaterialApp(
2123
title: 'Flutter FormBuilder Demo',
2224
debugShowCheckedModeBanner: false,
23-
localizationsDelegates: [
25+
localizationsDelegates: const [
2426
FormBuilderLocalizations.delegate,
2527
...GlobalMaterialLocalizations.delegates,
2628
GlobalWidgetsLocalizations.delegate,
2729
],
2830
supportedLocales: FormBuilderLocalizations.supportedLocales,
29-
home: _HomePage(),
31+
theme: ThemeData.light().copyWith(
32+
appBarTheme: const AppBarTheme()
33+
.copyWith(backgroundColor: Colors.blue.shade200)),
34+
home: const _HomePage(),
3035
);
3136
}
3237
}
@@ -141,6 +146,40 @@ class _HomePage extends StatelessWidget {
141146
);
142147
},
143148
),
149+
const Divider(),
150+
ListTile(
151+
title: const Text('Radio Checkbox itemDecorator'),
152+
trailing: const Icon(Icons.arrow_right_sharp),
153+
onTap: () {
154+
Navigator.of(context).push(
155+
MaterialPageRoute(
156+
builder: (context) {
157+
return const CodePage(
158+
title: 'ItemDecorators',
159+
child: DecoratedRadioCheckbox(),
160+
);
161+
},
162+
),
163+
);
164+
},
165+
),
166+
const Divider(),
167+
ListTile(
168+
title: const Text('GroupedRadio and GroupedCheckbox Orientation'),
169+
trailing: const Icon(Icons.arrow_right_sharp),
170+
onTap: () {
171+
Navigator.of(context).push(
172+
MaterialPageRoute(
173+
builder: (context) {
174+
return const CodePage(
175+
title: 'GroupedRadio and GroupedCheckbox',
176+
child: GroupedRadioCheckbox(),
177+
);
178+
},
179+
),
180+
);
181+
},
182+
),
144183
],
145184
),
146185
);

‎example/lib/sources/decorated_radio_checkbox.dart

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:flutter_form_builder/flutter_form_builder.dart';
3+
4+
/// Demonstrates the use of itemDecorators to wrap a box around selection items
5+
class DecoratedRadioCheckbox extends StatefulWidget {
6+
const DecoratedRadioCheckbox({Key? key}) : super(key: key);
7+
8+
@override
9+
State<DecoratedRadioCheckbox> createState() => _DecoratedRadioCheckboxState();
10+
}
11+
12+
class _DecoratedRadioCheckboxState extends State<DecoratedRadioCheckbox> {
13+
final _formKey = GlobalKey<FormBuilderState>();
14+
int? option;
15+
16+
@override
17+
Widget build(BuildContext context) {
18+
return SingleChildScrollView(
19+
child: FormBuilder(
20+
key: _formKey,
21+
child: Column(
22+
children: <Widget>[
23+
const SizedBox(height: 20),
24+
// this text appears correctly if the textScaler <> 1.0
25+
const Text(
26+
'label:column of Widgets itemBorder:true orient:wrap wrapSpacing:5.0',
27+
textScaler: TextScaler.linear(1.01)),
28+
FormBuilderCheckboxGroup(
29+
name: 'aCheckboxGroup1',
30+
options: getDemoOptionsWidgets(),
31+
wrapSpacing: 5.0,
32+
itemDecoration: BoxDecoration(
33+
color: Colors.orange.shade200,
34+
border: Border.all(color: Colors.blue),
35+
borderRadius: BorderRadius.circular(5.0)),
36+
),
37+
const SizedBox(height: 20),
38+
const Text(
39+
'label:column of Widgets itemBorder:true orient:wrap wrapSpacing:5.0',
40+
textScaler: TextScaler.linear(1.01)),
41+
FormBuilderCheckboxGroup(
42+
name: 'aCheckboxGroup2',
43+
options: getDemoOptionsWidgets(),
44+
wrapSpacing: 5.0,
45+
controlAffinity: ControlAffinity.trailing,
46+
itemDecoration: BoxDecoration(
47+
color: Colors.amber.shade200,
48+
border: Border.all(color: Colors.blueAccent),
49+
borderRadius: BorderRadius.circular(5.0)),
50+
),
51+
const SizedBox(height: 20),
52+
const Text(
53+
'label:column of Widgets itemBorder:true orient:wrap wrapSpacing: 5.0',
54+
textScaler: TextScaler.linear(1.01)),
55+
FormBuilderRadioGroup(
56+
name: 'aRadioGroup1',
57+
options: getDemoOptionsWidgets(),
58+
wrapSpacing: 5.0,
59+
itemDecoration: BoxDecoration(
60+
color: Colors.green.shade200,
61+
border: Border.all(color: Colors.blueAccent),
62+
borderRadius: BorderRadius.circular(5.0)),
63+
),
64+
const SizedBox(height: 20),
65+
const Text('label:value itemBorder:true orient:wrap wrapSpacing:10.0',
66+
textScaler: TextScaler.linear(1.01)),
67+
FormBuilderRadioGroup(
68+
name: 'aRadioGroup2',
69+
options: getDemoOptions(),
70+
wrapSpacing: 10.0,
71+
wrapRunSpacing: 10.0,
72+
decoration: InputDecoration(
73+
border: const OutlineInputBorder(),
74+
contentPadding: const EdgeInsets.only(left: 20, top: 40),
75+
labelText: 'hello there',
76+
icon: const Icon(Icons.access_alarm_outlined),
77+
fillColor: Colors.red.shade200),
78+
itemDecoration: BoxDecoration(
79+
color: Colors.blueGrey.shade200,
80+
border: Border.all(color: Colors.blueAccent),
81+
borderRadius: BorderRadius.circular(5.0)),
82+
),
83+
const SizedBox(height: 20),
84+
const Text(
85+
'itemDecoration:false label:value orient:wrap wrapSpacing:10.0',
86+
textScaler: TextScaler.linear(1.01)),
87+
FormBuilderRadioGroup(
88+
name: 'aRadioGroup3',
89+
options: getDemoOptions(),
90+
wrapSpacing: 10.0,
91+
),
92+
const SizedBox(height: 20),
93+
const Text('orient:horiz itemBorder:false wrapSpacing:5.0',
94+
textScaler: TextScaler.linear(1.01)),
95+
FormBuilderCheckboxGroup(
96+
name: 'aCheckboxGroup3',
97+
options: getDemoOptionsWidgets(),
98+
wrapSpacing: 5.0,
99+
orientation: OptionsOrientation.horizontal,
100+
itemDecoration: BoxDecoration(
101+
color: Colors.grey.shade300,
102+
// border: Border.all(color: Colors.blueAccent),
103+
borderRadius: BorderRadius.circular(5.0)),
104+
),
105+
const SizedBox(height: 20),
106+
const Text('orient:vert itemBorder:true wrapSpacing:5.0',
107+
textScaler: TextScaler.linear(1.01)),
108+
FormBuilderCheckboxGroup(
109+
name: 'aCheckboxGroup3',
110+
options: getDemoOptionsWidgets(),
111+
wrapSpacing: 5.0,
112+
orientation: OptionsOrientation.vertical,
113+
itemDecoration: BoxDecoration(
114+
color: Colors.red.shade100,
115+
border: Border.all(color: Colors.blueAccent),
116+
borderRadius: BorderRadius.circular(5.0)),
117+
),
118+
const SizedBox(height: 20),
119+
const Text(
120+
'label:w/sizebox orient:vert itemBorder:true wrapSpacing:5.0',
121+
textScaler: TextScaler.linear(1.01)),
122+
FormBuilderRadioGroup(
123+
name: 'aRadioGroup4',
124+
options: getDemoOptionsWidgets(forceMinWidth: 80.0),
125+
wrapSpacing: 5.0,
126+
orientation: OptionsOrientation.vertical,
127+
itemDecoration: BoxDecoration(
128+
color: Colors.lightBlue.shade100,
129+
border: Border.all(color: Colors.blueAccent),
130+
borderRadius: BorderRadius.circular(5.0)),
131+
),
132+
],
133+
),
134+
));
135+
}
136+
137+
/// options using column of widgets for the label
138+
/// We can force a min width by creating a sized box so we don't need another parameter
139+
List<FormBuilderFieldOption> getDemoOptionsWidgets({forceMinWidth = 0.0}) {
140+
return [
141+
FormBuilderFieldOption(
142+
value: "airplane",
143+
child: Container(
144+
padding: const EdgeInsets.all(5.0),
145+
child: Column(
146+
children: [
147+
const Text("Airplane"),
148+
const Icon(Icons.airplanemode_on),
149+
SizedBox(width: forceMinWidth, height: 0.0),
150+
],
151+
)),
152+
),
153+
FormBuilderFieldOption(
154+
value: "fire-truck",
155+
child: Container(
156+
padding: const EdgeInsets.all(5.0),
157+
child: Column(children: [
158+
const Text("Fire Truck"),
159+
const Icon(Icons.fire_truck),
160+
SizedBox(width: forceMinWidth, height: 0.0),
161+
])),
162+
),
163+
FormBuilderFieldOption(
164+
value: "bus-alert",
165+
child: Container(
166+
padding: const EdgeInsets.all(5.0),
167+
child: Column(children: [
168+
const Text("Bus Alert"),
169+
const Icon(Icons.bus_alert),
170+
SizedBox(width: forceMinWidth, height: 0.0),
171+
])),
172+
),
173+
FormBuilderFieldOption(
174+
value: "firetruck",
175+
child: Container(
176+
padding: const EdgeInsets.all(5.0),
177+
child: Column(children: [
178+
const Text("Motorcycle"),
179+
const Icon(Icons.motorcycle),
180+
SizedBox(width: forceMinWidth, height: 0.0),
181+
])),
182+
),
183+
];
184+
}
185+
186+
/// opens using just values
187+
List<FormBuilderFieldOption> getDemoOptions() {
188+
return const [
189+
FormBuilderFieldOption(
190+
value: "airplane",
191+
),
192+
FormBuilderFieldOption(
193+
value: "fire-truck",
194+
),
195+
FormBuilderFieldOption(
196+
value: "bus-alert",
197+
),
198+
FormBuilderFieldOption(
199+
value: "firetruck",
200+
),
201+
];
202+
}
203+
}

0 commit comments

Comments
 (0)