feat: Add BooleanMetaDataField to support checkbox inputs on sign-up …

…form (#115)

* Add BooleanMetaDataField for checkbox inputs in SupaEmailAuth

This commit introduces a new BooleanMetaDataField class to support checkbox inputs
in the SupaEmailAuth component. This enhancement allows for more versatile form
creation, particularly useful for consent checkboxes or boolean preferences.

Key changes:

1. New BooleanMetaDataField class:
   - Extends MetaDataField to maintain compatibility
   - Supports both simple text labels and rich text labels with interactive elements
     (allowing links to be inserted within the text)
   - Supports semantic labeling for accessability
   - Allows customization of checkbox position (leading or trailing)
   - Includes a 'required' option for mandatory fields

2. Updates to SupaEmailAuth:
   - Modified to handle both MetaDataField and BooleanMetaDataField
   - Implemented rendering logic for checkbox fields
   - Added support for rich text labels in checkboxes
   - Implemented validation for required checkbox fields

3. Styling improvements:
   - Ensured checkbox styling matches other form elements
   - Added support for dark mode theming
   - Implemented error message display for invalid checkbox fields
   - Error message added to localization class

4. Documentation:
   - Added comprehensive documentation for BooleanMetaDataField
   - Updated existing documentation to reflect new capabilities

5. Example updates:
   - Modified example code to demonstrate usage of BooleanMetaDataField
   - Included examples of both simple and rich text labels

6. Backward compatibility:
   - Maintained support for existing MetaDataField usage
   - No breaking changes to public API

This enhancement provides developers with more flexibility in creating
sign-up forms, particularly for scenarios requiring user consent or
boolean preferences, while maintaining the existing functionality
of the SupaEmailAuth component.

* Add documentation to README and minor code cleanup

README.md

@@ -27,6 +27,8 @@ SupaEmailAuth(
     // do something, for example: navigate("wait_for_email");
   },
   metadataFields: [
+    // Creates an additional TextField for string metadata, for example:
+    // {'username': 'exampleUsername'}
     MetaDataField(
       prefixIcon: const Icon(Icons.person),
       label: 'Username',
@@ -38,8 +40,38 @@ SupaEmailAuth(
         return null;
       },
     ),
-  ],
-),
+
+    // Creates a CheckboxListTile for boolean metadata, for example:
+    // {'marketing_consent': true}
+    BooleanMetaDataField(
+      label: 'I wish to receive marketing emails',
+      key: 'marketing_consent',
+      checkboxPosition: ListTileControlAffinity.leading,
+    ),
+    // Supports interactive text. Fields can be marked as required, blocking form
+    // submission unless the checkbox is checked.
+    BooleanMetaDataField(
+      key: 'terms_agreement',
+      isRequired: true,
+      checkboxPosition: ListTileControlAffinity.leading,
+      richLabelSpans: [
+        const TextSpan(
+            text: 'I have read and agree to the '),
+        TextSpan(
+          text: 'Terms and Conditions',
+          style: const TextStyle(
+            color: Colors.blue,
+          ),
+          recognizer: TapGestureRecognizer()
+            ..onTap = () {
+              // do something, for example: navigate("terms_and_conditions");
+            },
+        ),
+        // Or use some other custom widget.
+        WidgetSpan()
+      ],
+    ),
+  ]),
 ```
 
 ## Magic Link Auth

example/lib/sign_in.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/foundation.dart';
+import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:supabase_auth_ui/supabase_auth_ui.dart';
 
@@ -26,12 +27,16 @@ class SignUp extends StatelessWidget {
           borderRadius: BorderRadius.circular(8),
           borderSide: BorderSide.none,
         ),
-        labelStyle: const TextStyle(color: Color.fromARGB(179, 255, 255, 255)), // text labeling text entry
+        labelStyle: const TextStyle(
+            color:
+                Color.fromARGB(179, 255, 255, 255)), // text labeling text entry
       ),
       elevatedButtonTheme: ElevatedButtonThemeData(
         style: ElevatedButton.styleFrom(
-          backgroundColor: const Color.fromARGB(255, 22, 135, 188), // main button
-          foregroundColor: const Color.fromARGB(255, 255, 255, 255), // main button text
+          backgroundColor:
+              const Color.fromARGB(255, 22, 135, 188), // main button
+          foregroundColor:
+              const Color.fromARGB(255, 255, 255, 255), // main button text
           shape: RoundedRectangleBorder(
             borderRadius: BorderRadius.circular(8),
           ),
@@ -60,6 +65,29 @@ class SignUp extends StatelessWidget {
                   return null;
                 },
               ),
+              BooleanMetaDataField(
+                label: 'Keep me up to date with the latest news and updates.',
+                key: 'marketing_consent',
+                checkboxPosition: ListTileControlAffinity.leading,
+              ),
+              BooleanMetaDataField(
+                key: 'terms_agreement',
+                isRequired: true,
+                checkboxPosition: ListTileControlAffinity.leading,
+                richLabelSpans: [
+                  const TextSpan(text: 'I have read and agree to the '),
+                  TextSpan(
+                    text: 'Terms and Conditions',
+                    style: const TextStyle(
+                      color: Colors.blue,
+                    ),
+                    recognizer: TapGestureRecognizer()
+                      ..onTap = () {
+                        // Handle tap on Terms and Conditions
+                      },
+                  ),
+                ],
+              ),
             ],
           ),
 
@@ -76,17 +104,55 @@ class SignUp extends StatelessWidget {
                 child: Theme(
                   data: darkModeThemeData,
                   child: SupaEmailAuth(
-                    redirectTo: kIsWeb ? null : 'io.supabase.flutter://',
-                    onSignInComplete: navigateHome,
-                    onSignUpComplete: navigateHome,
-                    prefixIconEmail: null,
-                    prefixIconPassword: null,
-                    localization: const SupaEmailAuthLocalization(
-                        enterEmail: "email",
-                        enterPassword: "password",
-                        dontHaveAccount: "sign up",
-                        forgotPassword: "forgot password"),
-                  ),
+                      redirectTo: kIsWeb ? null : 'io.supabase.flutter://',
+                      onSignInComplete: navigateHome,
+                      onSignUpComplete: navigateHome,
+                      prefixIconEmail: null,
+                      prefixIconPassword: null,
+                      localization: const SupaEmailAuthLocalization(
+                          enterEmail: "email",
+                          enterPassword: "password",
+                          dontHaveAccount: "sign up",
+                          forgotPassword: "forgot password"),
+                      metadataFields: [
+                        MetaDataField(
+                          prefixIcon: const Icon(Icons.person),
+                          label: 'Username',
+                          key: 'username',
+                          validator: (val) {
+                            if (val == null || val.isEmpty) {
+                              return 'Please enter something';
+                            }
+                            return null;
+                          },
+                        ),
+                        BooleanMetaDataField(
+                          label:
+                              'Keep me up to date with the latest news and updates.',
+                          key: 'marketing_consent',
+                          checkboxPosition: ListTileControlAffinity.leading,
+                        ),
+                        BooleanMetaDataField(
+                          key: 'terms_agreement',
+                          isRequired: true,
+                          checkboxPosition: ListTileControlAffinity.leading,
+                          richLabelSpans: [
+                            const TextSpan(
+                                text: 'I have read and agree to the '),
+                            TextSpan(
+                              text: 'Terms and Conditions.',
+                              style: const TextStyle(
+                                color: Colors.blue,
+                              ),
+                              recognizer: TapGestureRecognizer()
+                                ..onTap = () {
+                                  //ignore: avoid_print
+                                  print('Terms and Conditions');
+                                },
+                            ),
+                          ],
+                        ),
+                      ]),
                 ),
               )),