use wrapSpacing for horiz and vert orientations

Author: freemansoft

example/lib/sources/decorated_radio_checkbox.dart

@@ -86,39 +86,47 @@ class _DecoratedRadioCheckboxState extends State<DecoratedRadioCheckbox> {
             wrapSpacing: 10.0,
           ),
           const SizedBox(height: 20),
-          const SizedBox(height: 20),
           const Text(
-              'With itemDecoration - orientation:horizontal - orientation: horiz - wrapSpacing 5.0',
+              'With itemDecoration - orientation: horiz - no border - wrapSpacing 5.0',
               textScaler: TextScaler.linear(1.01)),
           FormBuilderCheckboxGroup(
             name: 'aCheckboxGroup3',
             options: getDemoOptionsWidgets(),
             wrapSpacing: 5.0,
             orientation: OptionsOrientation.horizontal,
             itemDecoration: BoxDecoration(
-                gradient:
-                    const LinearGradient(colors: [Colors.red, Colors.white]),
-                border: Border.all(color: Colors.blueAccent),
+                color: Colors.grey.shade300,
+//                border: Border.all(color: Colors.blueAccent),
                 borderRadius: BorderRadius.circular(5.0)),
           ),
           const SizedBox(height: 20),
           const Text(
-              'With itemDecoration - orientation:vertical - orientation: vert - wrapSpacing 5.0',
+              'With itemDecoration - orientation: vert - with border - wrapSpacing 5.0',
               textScaler: TextScaler.linear(1.01)),
           FormBuilderCheckboxGroup(
             name: 'aCheckboxGroup3',
             options: getDemoOptionsWidgets(),
             wrapSpacing: 5.0,
             orientation: OptionsOrientation.vertical,
             itemDecoration: BoxDecoration(
-                gradient: const LinearGradient(
-                    begin: Alignment.topCenter,
-                    end: Alignment.bottomCenter,
-                    colors: [Colors.red, Colors.white]),
                 color: Colors.red.shade100,
                 border: Border.all(color: Colors.blueAccent),
                 borderRadius: BorderRadius.circular(5.0)),
           ),
+          const SizedBox(height: 20),
+          const Text(
+              'With itemDecoration - orientation: vert - with border - wrapSpacing 5.0',
+              textScaler: TextScaler.linear(1.01)),
+          FormBuilderRadioGroup(
+            name: 'aRadioGroup4',
+            options: getDemoOptionsWidgets(),
+            wrapSpacing: 5.0,
+            orientation: OptionsOrientation.vertical,
+            itemDecoration: BoxDecoration(
+                color: Colors.lightBlue.shade100,
+                border: Border.all(color: Colors.blueAccent),
+                borderRadius: BorderRadius.circular(5.0)),
+          ),
         ],
       ),
     ));

lib/src/widgets/grouped_checkbox.dart

@@ -182,7 +182,9 @@ class GroupedCheckbox<T> extends StatelessWidget {
   final ControlAffinity controlAffinity;
 
   /// A BoxDecoration that is added to each item if provided
-  /// WrapSpacing is reused for the the padding inside the itemDecoration
+  /// [wrapSpacing] is reused for the the padding inside the [itemDecoration].
+  /// [wrapSpacing] is used as inter-item bottom margin for [Orientation.vertical]
+  /// [wrapSpacing] is used as inter-item right margin for [Orientation.horizontal].
   /// on the side opposite from the control
   final BoxDecoration? itemDecoration;
 
@@ -306,12 +308,17 @@ class GroupedCheckbox<T> extends StatelessWidget {
 
     if (this.itemDecoration != null) {
       compositeItem = Container(
-        padding: EdgeInsets.only(
-            left:
-                controlAffinity == ControlAffinity.leading ? 0.0 : wrapSpacing,
-            right:
-                controlAffinity == ControlAffinity.leading ? wrapSpacing : 0.0),
         decoration: this.itemDecoration,
+        padding: EdgeInsets.only(
+          left: controlAffinity == ControlAffinity.leading ? 0.0 : wrapSpacing,
+          right: controlAffinity == ControlAffinity.leading ? wrapSpacing : 0.0,
+        ),
+        margin: EdgeInsets.only(
+          bottom:
+              orientation == OptionsOrientation.vertical ? wrapSpacing : 0.0,
+          right:
+              orientation == OptionsOrientation.horizontal ? wrapSpacing : 0.0,
+        ),
         child: compositeItem,
       );
     }

lib/src/widgets/grouped_radio.dart

@@ -173,7 +173,9 @@ class GroupedRadio<T> extends StatefulWidget {
   final ControlAffinity controlAffinity;
 
   /// A BoxDecoration that is added to each item if provided
-  /// WrapSpacing is reused for the the padding inside the itemDecoration
+  /// [wrapSpacing] is reused for the the padding inside the [itemDecoration].
+  /// [wrapSpacing] is used as inter-item bottom margin for [Orientation.vertical]
+  /// [wrapSpacing] is used as inter-item right margin for [Orientation.horizontal].
   /// on the side opposite from the control
   final BoxDecoration? itemDecoration;
 
@@ -306,6 +308,14 @@ class _GroupedRadioState<T> extends State<GroupedRadio<T?>> {
             right: widget.controlAffinity == ControlAffinity.leading
                 ? widget.wrapSpacing
                 : 0.0),
+        margin: EdgeInsets.only(
+          bottom: widget.orientation == OptionsOrientation.vertical
+              ? widget.wrapSpacing
+              : 0.0,
+          right: widget.orientation == OptionsOrientation.horizontal
+              ? widget.wrapSpacing
+              : 0.0,
+        ),
         child: compositeItem,
       );
     }