Checkbox Documentation

Here's a documentation on how to customize checkboxes using the provided code snippet:

‣

Customizing Checkboxes

Checkboxes are interactive elements used to allow users to make selections from a list of options. Customizing their appearance and behavior enables you to align them with your app's design language and improve user interaction. This documentation will guide you through the process of customizing checkboxes using the provided code.

‣

1. Checkbox Theme Data

‣

2. Checkbox Main Color

‣

3. Checkbox Fill Color

‣

Checkbox Showcase

‣

Example Checkbox Types

‣

Conclusion

‣

Example

CheckBoxScreen.dart

class CheckBoxScreen extends StatelessWidget {
  
  const CheckBoxScreen({super.key});
   ThemeController themeController = Get.find();
   
    @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).colorScheme.background,
      appBar: showAppBar
          ? AppBar(
              title: const Text("CheckBox Theme"),
            )
          : null,
      body: Center(
        child: Container(
          constraints: const BoxConstraints(
            maxWidth: 1000,
          ),
          alignment: Alignment.topCenter,
          padding: const EdgeInsets.all(16),
          child: SingleChildScrollView(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [ 
                      Obx(
                          () => CustomContainer(
                        title: 'CheckBox main color',
                        description: 'Background color',
                        child: ThemePopupMenu3(
                            schemeIndex:
                            themeController.checkBoxSchemeIndex.value,
                            onChanged:
                            themeController.setCheckBoxSchemeColor),
                      ),
                    ),
                    const SizedBox(height: 20,),
                    _checkboxShowcase(),
                    const SizedBox(
                      height: 20,
                    ),
                    Obx(
                          () => CustomContainer(
                        title: 'CheckBox Fill color',
                        description: 'Fill color',
                        child: ThemePopupMenu3(
                            schemeIndex:
                            themeController.checkBoxFillColorSchemeIndex.value,
                            onChanged:
                            themeController.setCheckBoxFillColorSchemeColor),
                      ),
                    )
                  ],
                ),
              ),
           ),
        );
      }
      
 Widget _checkboxShowcase(){
  RxBool isSelected1 = true.obs;
  RxBool? isSelected2;
  return RepaintBoundary(
    child: Obx(
      ()=> Wrap(
        crossAxisAlignment: WrapCrossAlignment.center,
        spacing: 8,
        runSpacing: 8,
        children: <Widget>[
          Checkbox(
            value: isSelected1.value,
            onChanged: (bool? value) {
                isSelected1.value = value ?? false;
            },
          ),
          Checkbox(
            value: !isSelected1.value,
            onChanged: (bool? value) {
                isSelected1.value= !(value ?? false);
            },
          ),
          const Text('Error'),
          Checkbox(
            isError: true,
            value: isSelected1.value,
            onChanged: (bool? value) {
                isSelected1.value = value ?? false;
            },
          ),
          Checkbox(
            isError: true,
            value: !isSelected1.value,
            onChanged: (bool? value) {
                isSelected1.value = !(value ?? false);
            },
          ),
          const Text('Tri-state'),
          Checkbox(
            tristate: true,
            value: isSelected2?.value,
            onChanged: (bool? value) {
                isSelected2?.value = !(value ?? false);
            },
          ),
          const Text('Disabled'),
          const Checkbox(
            value: true,
            onChanged: null,
          ),
          const Checkbox(
            value: null,
            tristate: true,
            onChanged: null,
          ),
          const Checkbox(
            value: false,
            onChanged: null,
          ),
        ],
      ),
    ),
  );
}

 }

themecontroller.dart

class ThemeController extends GetxController {
  ///**[Checkbox Setting]**///

  ///CheckBox Main Color
  final RxInt checkBoxSchemeIndex = 0.obs;
  final getCheckBoxSchemeColor = Rx<Color?>(null);

  void setCheckBoxSchemeColor(Color? color, int value) {
    getCheckBoxSchemeColor.value = color;
    checkBoxSchemeIndex.value = value;
 }

  ///CheckBox Fill Color
  final RxInt checkBoxFillColorSchemeIndex = 0.obs;
  final getCheckBoxFillColorSchemeColor = Rx<Color?>(null);

  void setCheckBoxFillColorSchemeColor(Color? color, int value) {
    getCheckBoxFillColorSchemeColor.value = color;
    checkBoxFillColorSchemeIndex.value = value;
  }
  ///CheckboxThemeData Settings
  CheckboxThemeData buildCheckboxThemeData(BuildContext context){
    return CheckboxThemeData(

        side: BorderSide(
          width: 1.5,
          color: unselectedToggleIsColored.value
              ? Theme.of(context).colorScheme.primaryContainer
              : getCheckBoxFillColorSchemeColor.value ??
             Theme.of(context).colorScheme.primaryContainer,
        ),
        fillColor: MaterialStateProperty.resolveWith<Color?>((Set<MaterialState> states) {
          // Check if the checkbox is checked
          if (states.contains(MaterialState.selected)) {
            // Return the fill color for checked state
            return getCheckBoxFillColorSchemeColor.value??  FlexSubThemes.schemeColor(
                SchemeColor.primary, Theme.of(context).colorScheme);
          }
          // Return null to use the default fill color for unchecked state
          return null;
        }),
        checkColor: MaterialStatePropertyAll(
            getCheckBoxSchemeColor.value));
  }
 }

main.dart
///In ThemeData add this code dark and light theme

                  checkboxTheme: widget.themeController.buildCheckboxThemeData(context),

Output: