Added leadingInput option for CheckboxList

Author: danvick

CHANGELOG.md

@@ -1,3 +1,6 @@
+## [3.1.0] - 15-May-2019
+* Added `leadingInput` option for CheckboxList, Checkbox and Radio - Allows the option to have the input before its label (left)
+
 ## [3.0.1] - 28-April-2019
 * Fixed bug in where `focuNode` for `FormBuilderTextField` is ignored. Closes [#53](https://github.com/danvick/flutter_form_builder/issues/53)
 * Fixed bug in where `textEditingConfiguration` for `FormBuilderTypeAhead` ignored

README.md

@@ -69,8 +69,8 @@ Column(
             ],
           ),
           FormBuilderRadio(
-            decoration:
-                InputDecoration(labelText: 'My chosen language'),
+            decoration: InputDecoration(labelText: 'My chosen language'),
+            leadingInput: true,
             attribute: "best_language",
             validators: [FormBuilderValidators.required()],
             options: [
@@ -303,7 +303,7 @@ This package is dependent on the following packages and plugins:
 - [X] Improve documentation by showing complete list of input types and their usage and options
 - [X] Create a `transformer` function option that will convert field value when field id saved - can be used to convert string to number, change to uppercase etc.
 - [X] Assert no duplicates in `FormBuilderInput`s `attribute` names
-- [ ] Allow options for Checkboxes and Radios to appear left or right
+- [X] Allow options for Checkboxes and Radios to appear left or right - Done via `leadingInput` by [Sven Schöne](https://github.com/SvenSchoene)
 
 ### New FormBuilder inputs
 - [X] SignaturePad - Based on [https://pub.dartlang.org/packages/signature](https://pub.dartlang.org/packages/signature)

example/lib/main.dart

@@ -168,6 +168,7 @@ class MyHomePageState extends State<MyHomePage> {
                       attribute: 'accept_terms',
                       initialValue: false,
                       onChanged: _onChanged,
+                      leadingInput: true,
                       label: Text(
                           "I have read and agree to the terms and conditions"),
                       validators: [
@@ -233,6 +234,7 @@ class MyHomePageState extends State<MyHomePage> {
                       decoration:
                           InputDecoration(labelText: 'My chosen language'),
                       attribute: "best_language",
+                      leadingInput: true,
                       onChanged: _onChanged,
                       validators: [FormBuilderValidators.required()],
                       options: [
@@ -267,8 +269,10 @@ class MyHomePageState extends State<MyHomePage> {
                       initialValue: 10,
                       step: 1,
                       validators: [
-                        (val){
-                          if(!_fbKey.currentState.fields["accept_terms_switch"].currentState.value && val >= 10){
+                        (val) {
+                          if (!_fbKey.currentState.fields["accept_terms_switch"]
+                                  .currentState.value &&
+                              val >= 10) {
                             return "You can only put more than 10 if you've accepted terms";
                           }
                         }
@@ -287,6 +291,7 @@ class MyHomePageState extends State<MyHomePage> {
                           labelText: "The language of my people"),
                       attribute: "languages",
                       initialValue: ["Dart"],
+                      leadingInput: true,
                       options: [
                         FormBuilderFieldOption(value: "Dart"),
                         FormBuilderFieldOption(value: "Kotlin"),

lib/src/fields/form_builder_checkbox_list.dart

@@ -12,13 +12,15 @@ class FormBuilderCheckboxList extends StatefulWidget {
   final ValueTransformer valueTransformer;
 
   final List<FormBuilderFieldOption> options;
+  final bool leadingInput;
 
   FormBuilderCheckboxList({
     @required this.attribute,
     @required this.options,
     this.initialValue = const [],
     this.validators = const [],
     this.readonly = false,
+    this.leadingInput = false,
     this.decoration = const InputDecoration(),
     this.onChanged,
     this.valueTransformer,
@@ -48,6 +50,34 @@ class _FormBuilderCheckboxListState extends State<FormBuilderCheckboxList> {
     super.dispose();
   }
 
+  Widget _checkbox(FormFieldState<dynamic> field, int i) {
+    return Checkbox(
+      value: field.value.contains(widget.options[i].value),
+      onChanged: _readonly
+          ? null
+          : (bool value) {
+        var currValue = field.value;
+        if (value)
+          currValue.add(widget.options[i].value);
+        else
+          currValue.remove(widget.options[i].value);
+        field.didChange(currValue);
+        if (widget.onChanged != null)
+          widget.onChanged(currValue);
+      },
+    );
+  }
+
+  Widget _leading(FormFieldState<dynamic> field, int i) {
+    if (widget.leadingInput) return _checkbox(field, i);
+    return null;
+  }
+
+  Widget _trailing(FormFieldState<dynamic> field, int i) {
+    if (!widget.leadingInput) return _checkbox(field, i);
+    return null;
+  }
+
   @override
   Widget build(BuildContext context) {
     return FormField(
@@ -76,21 +106,8 @@ class _FormBuilderCheckboxListState extends State<FormBuilderCheckboxList> {
                 dense: true,
                 isThreeLine: false,
                 contentPadding: EdgeInsets.all(0.0),
-                leading: Checkbox(
-                  value: field.value.contains(widget.options[i].value),
-                  onChanged: _readonly
-                      ? null
-                      : (bool value) {
-                          var currValue = field.value;
-                          if (value)
-                            currValue.add(widget.options[i].value);
-                          else
-                            currValue.remove(widget.options[i].value);
-                          field.didChange(currValue);
-                          if (widget.onChanged != null)
-                            widget.onChanged(currValue);
-                        },
-                ),
+                leading: _leading(field, i),
+                trailing: _trailing(field, i),
                 title: Text(
                     "${widget.options[i].label ?? widget.options[i].value}"),
                 onTap: _readonly

pubspec.yaml

@@ -1,6 +1,6 @@
 name: flutter_form_builder
 description: Package to build Material Form with fields like TextField, DropDown, Switches etc. with ability to create custom FormFields and composability and reuse validation functions.
-version: 3.0.1
+version: 3.1.0
 author: Danvick Miller <[email protected]>
 homepage: https://github.com/danvick/flutter_form_builder