Remove form support from FSwitch (#185)

* Complete implementation

* Commit from GitHub Actions (Forui Samples Presubmit)

* Fix issues with checkbox docs

docs/pages/docs/checkbox.mdx

@@ -17,9 +17,9 @@ For touch devices, a [switch](/docs/switch) is generally recommended over a chec
         <Widget name='checkbox' query={{enabled: 'true'}}/>
     </Tabs.Tab>
     <Tabs.Tab>
-        ```dart {12-20}
+        ```dart {12-18}
         class Page extends StatefulWidget {
-          const Page();
+          const Page({super.key});
 
           @override
           State<Page> createState() => PageState();
@@ -67,9 +67,9 @@ FCheckbox(
     <Widget name='checkbox' query={{initialValue: 'true', enabled: 'false'}}/>
   </Tabs.Tab>
   <Tabs.Tab>
-    ```dart {20}
+    ```dart {18}
     class Page extends StatefulWidget {
-      const Page();
+      const Page({super.key});
 
       @override
       State<Page> createState() => PageState();
@@ -101,7 +101,7 @@ FCheckbox(
   <Tabs.Tab>
     ```dart {15}
     class Page extends StatefulWidget {
-      const Page();
+      const Page({super.key});
 
       @override
       State<Page> createState() => PageState();
@@ -133,7 +133,7 @@ FCheckbox(
     <Tabs.Tab>
         ```dart {12-17}
         class Page extends StatefulWidget {
-          const Page();
+          const Page({super.key});
 
           @override
           State<Page> createState() => PageState();
@@ -161,7 +161,7 @@ FCheckbox(
     <Widget name='checkbox' variant='form' query={{}} height={550}/>
   </Tabs.Tab>
   <Tabs.Tab>
-    ```dart {32-47}
+    ```dart {27-40}
     class RegisterForm extends StatefulWidget {
       const RegisterForm({super.key});
 
@@ -172,11 +172,6 @@ FCheckbox(
     class _RegisterFormState extends State<RegisterForm> {
       final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
 
-      @override
-      void initState() {
-        super.initState();
-      }
-
       @override
       Widget build(BuildContext context) => Form(
             key: _formKey,

docs/pages/docs/switch.mdx

@@ -15,12 +15,25 @@ A switch that allows the user to toggle between checked and unchecked. It can al
     <Widget name='switch' query={{enabled: 'true'}}/>
   </Tabs.Tab>
   <Tabs.Tab>
-    ```dart
-    FSwitch(
-      label: const Text('Airplane Mode'),
-      semanticLabel: 'Airplane Mode',
-      onChanged: (value) {},
-    );
+    ```dart {12-17}
+    class Page extends StatefulWidget {
+      const Page({super.key});
+
+      @override
+      State<Page> createState() => PageState();
+    }
+
+    class PageState extends State<Page> {
+      bool state = false;
+
+      @override
+      Widget build(BuildContext context) => FSwitch(
+        label: const Text('Airplane Mode'),
+        semanticLabel: 'Airplane Mode',
+        value: state,
+        onChange: (value) => setState(() => state = value),
+      );
+    }
     ```
   </Tabs.Tab>
 </Tabs>
@@ -32,11 +45,13 @@ A switch that allows the user to toggle between checked and unchecked. It can al
 ```dart
 FSwitch(
   label: const Text('Airplane Mode'),
+  description: const Text('Turn on airplane mode to disable all wireless connections.'),
+  error: const Text('Please turn on airplane mode.'),
   semanticLabel: 'Airplane Mode',
+  value: true,
+  onChanged: (value) {},
   enabled: true,
-  initialValue: true,
   autofocus: true,
-  onChanged: (value) {},
 );
 ```
 
@@ -49,13 +64,26 @@ FSwitch(
     <Widget name='switch' query={{enabled: 'false'}}/>
   </Tabs.Tab>
   <Tabs.Tab>
-    ```dart {4}
-    FSwitch(
-      label: const Text('Airplane Mode'),
-      semanticLabel: 'Airplane Mode',
-      enabled: false,
-      onChanged: (value) {},
-    );
+    ```dart {17}
+    class Page extends StatefulWidget {
+      const Page({super.key});
+
+      @override
+      State<Page> createState() => PageState();
+    }
+
+    class PageState extends State<Page> {
+      bool state = false;
+
+      @override
+      Widget build(BuildContext context) => FSwitch(
+        label: const Text('Airplane Mode'),
+        semanticLabel: 'Airplane Mode',
+        value: state,
+        onChange: (value) => setState(() => state = value),
+        enabled: false,
+      );
+    }
     ```
   </Tabs.Tab>
 </Tabs>
@@ -67,7 +95,7 @@ FSwitch(
     <Widget name='switch' variant='form' query={{}} height={500}/>
   </Tabs.Tab>
   <Tabs.Tab>
-    ```dart {59, 90}
+    ```dart {54-64, 95-105}
     class NotificationForm extends StatefulWidget {
       const NotificationForm({super.key});
 
@@ -78,11 +106,6 @@ FSwitch(
     class _NotificationFormState extends State<NotificationForm> {
       final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
 
-      @override
-      void initState() {
-        super.initState();
-      }
-
       @override
       Widget build(BuildContext context) {
         final theme = context.theme;
@@ -126,7 +149,17 @@ FSwitch(
                           ],
                         ),
                       ),
-                      const FSwitch(),
+                      FormField(
+                        initialValue: false,
+                        onSaved: (value) {
+                          // Save values somewhere.
+                        },
+                        validator: (value) => null, // No validation required.
+                        builder: (state) => FSwitch(
+                          value: state.value ?? false,
+                          onChange: (value) => state.didChange(value),
+                        ),
+                      ),
                     ],
                   ),
                 ),
@@ -157,15 +190,33 @@ FSwitch(
                           ],
                         ),
                       ),
-                      const FSwitch(initialValue: true),
+                      FormField(
+                        initialValue: true,
+                        onSaved: (value) {
+                          // Save values somewhere.
+                        },
+                        validator: (value) => null, // No validation required.
+                        builder: (state) => FSwitch(
+                          value: state.value ?? false,
+                          onChange: (value) => state.didChange(value),
+                        ),
+                      ),
                     ],
                   ),
                 ),
               ),
               const SizedBox(height: 30),
               FButton(
                 label: const Text('Submit'),
-                onPress: () => _formKey.currentState!.validate(),
+                onPress: () {
+                  if (!_formKey.currentState!.validate()) {
+                    // Handle errors here.
+                    return;
+                  }
+
+                  _formKey.currentState!.save();
+                  // Do something.
+                },
               ),
             ],
           ),

forui/example/lib/sandbox.dart

@@ -10,6 +10,8 @@ class Sandbox extends StatefulWidget {
 }
 
 class _SandboxState extends State<Sandbox> {
+  bool value = false;
+
   @override
   void initState() {
     super.initState();
@@ -30,6 +32,13 @@ class _SandboxState extends State<Sandbox> {
             ],
           ),
           const SizedBox(height: 20),
+          FSwitch(
+            label: const Text('Switch'),
+            description: const Text('Switch Description'),
+            value: value,
+            onChange: (value) => setState(() => this.value = value),
+          ),
+          const SizedBox(height: 20),
           FTooltip(
             longPressExitDuration: const Duration(seconds: 5000),
             tipBuilder: (context, style, _) => const Text('Add to library'),

forui/lib/src/widgets/checkbox.dart

@@ -25,14 +25,14 @@ class FCheckbox extends StatelessWidget {
   /// The description displayed below the [label].
   final Widget? description;
 
-  /// The semantic label used by accessibility frameworks.
-  final String? semanticLabel;
-
   /// The error displayed below the [description].
   ///
   /// If the value is present, the checkbox is in an error state.
   final Widget? error;
 
+  /// The semantic label used by accessibility frameworks.
+  final String? semanticLabel;
+
   /// The current value of the checkbox.
   final bool value;
 
@@ -58,8 +58,8 @@ class FCheckbox extends StatelessWidget {
     this.style,
     this.label,
     this.description,
-    this.semanticLabel,
     this.error,
+    this.semanticLabel,
     this.value = false,
     this.onChange,
     this.enabled = true,
@@ -78,18 +78,18 @@ class FCheckbox extends StatelessWidget {
       (_, true) => (FLabelState.error, style.errorStyle),
     };
 
-    return FocusableActionDetector(
-      enabled: enabled,
-      autofocus: autofocus,
-      focusNode: focusNode,
-      onFocusChange: onFocusChange,
-      mouseCursor: enabled ? SystemMouseCursors.click : MouseCursor.defer,
-      child: Semantics(
-        label: semanticLabel,
+    return GestureDetector(
+      onTap: enabled ? () => onChange?.call(!value) : null,
+      child: FocusableActionDetector(
         enabled: enabled,
-        checked: value,
-        child: GestureDetector(
-          onTap: enabled ? () => onChange?.call(!value) : null,
+        autofocus: autofocus,
+        focusNode: focusNode,
+        onFocusChange: onFocusChange,
+        mouseCursor: enabled ? SystemMouseCursors.click : MouseCursor.defer,
+        child: Semantics(
+          label: semanticLabel,
+          enabled: enabled,
+          checked: value,
           child: FLabel(
             axis: Axis.horizontal,
             state: labelState,