demonstrate orientation horizontal and vertical

Author: freemansoft

example/lib/main.dart

@@ -18,16 +18,19 @@ class MyApp extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return const MaterialApp(
+    return MaterialApp(
       title: 'Flutter FormBuilder Demo',
       debugShowCheckedModeBanner: false,
-      localizationsDelegates: [
+      localizationsDelegates: const [
         FormBuilderLocalizations.delegate,
         ...GlobalMaterialLocalizations.delegates,
         GlobalWidgetsLocalizations.delegate,
       ],
       supportedLocales: FormBuilderLocalizations.supportedLocales,
-      home: _HomePage(),
+      theme: ThemeData.light().copyWith(
+          appBarTheme: const AppBarTheme()
+              .copyWith(backgroundColor: Colors.blue.shade200)),
+      home: const _HomePage(),
     );
   }
 }

example/lib/sources/decorated_radio_checkbox.dart

@@ -1,6 +1,9 @@
+import 'dart:ui';
+
 import 'package:flutter/material.dart';
 import 'package:flutter_form_builder/flutter_form_builder.dart';
 
+/// Demonstrates the use of itemDecorators to wrap a box around selection items
 class DecoratedRadioCheckbox extends StatefulWidget {
   const DecoratedRadioCheckbox({Key? key}) : super(key: key);
 
@@ -14,76 +17,114 @@ class _DecoratedRadioCheckboxState extends State<DecoratedRadioCheckbox> {
 
   @override
   Widget build(BuildContext context) {
-    return FormBuilder(
+    return SingleChildScrollView(
+        child: FormBuilder(
       key: _formKey,
       child: Column(
         children: <Widget>[
           const SizedBox(height: 20),
           // this text appears correctly if the textScaler <> 1.0
           const Text(
-              'Checkboxes: control leading - with itemDecoration- label area is a column of Widgets - wrapSpacing 5.0',
+              'With itemDecoration- label is a column of Widgets - orientation: wrap - wrapSpacing 5.0',
               textScaler: TextScaler.linear(1.01)),
           FormBuilderCheckboxGroup(
-            name: 'aCheckboxGroup',
+            name: 'aCheckboxGroup1',
             options: getDemoOptionsWidgets(),
             wrapSpacing: 5.0,
             itemDecoration: BoxDecoration(
-                border: Border.all(color: Colors.blueAccent),
+                color: Colors.orange.shade200,
+                border: Border.all(color: Colors.blue),
                 borderRadius: BorderRadius.circular(5.0)),
           ),
           const SizedBox(height: 20),
           const Text(
-              'Checkboxes: control trailing - with itemDecoration - label area is a column of Widgets - wrapSpacing 5.0',
+              'With itemDecoration - label is a column of Widgets - orientation: wrap - wrapSpacing 5.0',
               textScaler: TextScaler.linear(1.01)),
           FormBuilderCheckboxGroup(
-            name: 'aCheckboxGroup',
+            name: 'aCheckboxGroup2',
             options: getDemoOptionsWidgets(),
             wrapSpacing: 5.0,
             controlAffinity: ControlAffinity.trailing,
             itemDecoration: BoxDecoration(
+                color: Colors.amber.shade200,
                 border: Border.all(color: Colors.blueAccent),
                 borderRadius: BorderRadius.circular(5.0)),
           ),
           const SizedBox(height: 20),
           const Text(
-              'Radio: control leading - with itemDecoration - label area is a column of Widgets - wrapSpacing 5.0',
+              'With itemDecoration - label is a column of Widgets - orientation: wrap - wrapSpacing 5.0',
               textScaler: TextScaler.linear(1.01)),
           FormBuilderRadioGroup(
-            name: 'aRadioGroup',
+            name: 'aRadioGroup1',
             options: getDemoOptionsWidgets(),
             wrapSpacing: 5.0,
             itemDecoration: BoxDecoration(
+                color: Colors.green.shade200,
                 border: Border.all(color: Colors.blueAccent),
                 borderRadius: BorderRadius.circular(5.0)),
           ),
           const SizedBox(height: 20),
           const Text(
-              'Radio: control leading - with itemDecoration - label area just the value - wrapSpacing 10.0',
+              'With itemDecoration - label is the value - orientation: wrap - wrapSpacing 10.0',
               textScaler: TextScaler.linear(1.01)),
           FormBuilderRadioGroup(
             name: 'aRadioGroup2',
             options: getDemoOptions(),
             wrapSpacing: 10.0,
             itemDecoration: BoxDecoration(
+                color: Colors.blueGrey.shade200,
                 border: Border.all(color: Colors.blueAccent),
                 borderRadius: BorderRadius.circular(5.0)),
           ),
           const SizedBox(height: 20),
           const Text(
-              'Radio: control leading - no itemDecoration - label area just the value - wrapSpacing 10.0',
+              'No itemDecoration - label is the value - orientation: wrap - wrapSpacing 10.0',
               textScaler: TextScaler.linear(1.01)),
-
           FormBuilderRadioGroup(
-            name: 'aRadioGroup2',
+            name: 'aRadioGroup3',
             options: getDemoOptions(),
             wrapSpacing: 10.0,
           ),
           const SizedBox(height: 20),
+          const SizedBox(height: 20),
+          const Text(
+              'With itemDecoration - orientation:horizontal - orientation: horiz - 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),
+                borderRadius: BorderRadius.circular(5.0)),
+          ),
+          const SizedBox(height: 20),
+          const Text(
+              'With itemDecoration - orientation:vertical - orientation: vert - 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)),
+          ),
         ],
       ),
-    );
+    ));
   }
 
+  /// options using column of widgets for the label
   List<FormBuilderFieldOption> getDemoOptionsWidgets() {
     return const [
       FormBuilderFieldOption(
@@ -105,6 +146,7 @@ class _DecoratedRadioCheckboxState extends State<DecoratedRadioCheckbox> {
     ];
   }
 
+  /// opens using just values
   List<FormBuilderFieldOption> getDemoOptions() {
     return const [
       FormBuilderFieldOption(