Switch Documentation

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

‣

Customizing Switches

Switches are interactive elements used to toggle between two states, typically on and off. Customizing their appearance and behavior allows you to align them with your app's design language and enhance user experience. This documentation will guide you through the process of customizing switches using the provided code.

‣

1. Switch Theme Data

‣

2. Switch Thumb Size

‣

3. Switch Color Customization

‣

Switch Showcase

To visualize the customized switches, refer to the _switchShowcase function in your code. This function displays a showcase of various switch types with different configurations.

Widget _switchShowcase(bool showCupertinoSwitches){
   RxBool isOn1 = true.obs;
   final ColorScheme colorScheme = Theme.of(context).colorScheme;
   final bool isLight = Theme.of(context).brightness == Brightness.light;
   return RepaintBoundary(
     child: Obx(
       ()=> Wrap(
         crossAxisAlignment: WrapCrossAlignment.center,
         spacing: 8,
         runSpacing: 8,
         children: <Widget>[
           if (showCupertinoSwitches) const Text('M3:'),
           Switch(
             value: isOn1.value,
             onChanged: (bool value) {
                 isOn1.value = value;
             },
           ),
           Switch(
             value: !isOn1.value,
             onChanged: (bool value) {

                 isOn1.value = !value;

             },
           ),
           Switch(
             thumbIcon: MaterialStateProperty.resolveWith<Icon?>(
                     (Set<MaterialState> states) {
                   if (states.contains(MaterialState.selected)) {
                     return Icon(Icons.check,
                         color:
                         isLight ? colorScheme.primary : colorScheme.onPrimary);
                   }
                   // All other states will use the default thumbIcon.
                   return Icon(Icons.close, color: colorScheme.onPrimary);
                 }),
             value: isOn1.value,
             onChanged: (bool value) {

                 isOn1.value = value;

             },
           ),
           const Text('Disabled'),
           Switch(
             value: isOn1.value,
             onChanged: null,
           ),
           Switch(
             value: !isOn1.value,
             onChanged: null,
           ),
           if (showCupertinoSwitches) ...<Widget>[
             const Text('iOS'),
             CupertinoSwitch(
               activeColor: colorScheme.primary,
               value: isOn1.value,
               onChanged: (bool value) {

                   isOn1.value = value;

               },
             ),
             CupertinoSwitch(
               activeColor: colorScheme.primary,
               value: isOn1.value,
               onChanged: null,
             ),
             CupertinoSwitch(
               activeColor: colorScheme.primary,
               value: !isOn1.value,
               onChanged: (bool value) {
                   isOn1.value = !value;
               },
             ),
             CupertinoSwitch(
               activeColor: colorScheme.primary,
               value: !isOn1.value,
               onChanged: null,
             ),
           ],
         ],
       ),
     ),
   );
 }

Output:

‣

Example Switch Types

‣

Conclusion

‣

Example

SwitchScreen.dart

class SwitchScreen extends StatelessWidget {
  
  const SwitchScreen({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("Switch 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: 'Switch main color',
                        description: 'Background color',
                        child: ThemePopupMenu3(
                            schemeIndex:
                            themeController.switchSchemeIndex.value,
                            onChanged: themeController.setSwitchSchemeColor),
                      ),
                    ),
                    const SizedBox(
                      height: 20,
                    ),
                    _switchShowcase(false),
                    const SizedBox(
                      height: 20,
                    ),
                    Obx(
                          () => CustomContainer(
                        title: 'Switch On State color',
                        description: 'Hover/pressed/Focused color',
                        child: ThemePopupMenu3(
                            schemeIndex: themeController
                                .switchOnStateSchemeIndex.value,
                            onChanged: themeController
                                .setSwitchOnStateSchemeColor),
                      ),
                    ),
                    const SizedBox(height: 20,),
                    Obx(
                        ()=> SwitchListTileReveal(
                        title: const Text('Thumb size is fixed'),
                        subtitle: const Text('Turn ON to keep the Switch thumb the same '
                            'size when Switch is ON or OFF. Only available in Material-3 '
                            'mode. When on the Material-3 Switch looks even more like an '
                            'iOS Switch.\n'),
                        value: themeController.switchThumbFixedSize.value &&
                            themeController.useMaterial3.value,
                        onChanged:
                        themeController.useMaterial3.value
                            ? themeController.setSwitchThumbFixedSize
                            : null,
                      ),
                    ),
                  ],
                ),
              ),
           ),
        );
      }
      
Widget _switchShowcase(bool showCupertinoSwitches){
   RxBool isOn1 = true.obs;
   final ColorScheme colorScheme = Theme.of(context).colorScheme;
   final bool isLight = Theme.of(context).brightness == Brightness.light;
   return RepaintBoundary(
     child: Obx(
       ()=> Wrap(
         crossAxisAlignment: WrapCrossAlignment.center,
         spacing: 8,
         runSpacing: 8,
         children: <Widget>[
           if (showCupertinoSwitches) const Text('M3:'),
           Switch(
             value: isOn1.value,
             onChanged: (bool value) {
                 isOn1.value = value;
             },
           ),
           Switch(
             value: !isOn1.value,
             onChanged: (bool value) {

                 isOn1.value = !value;

             },
           ),
           Switch(
             thumbIcon: MaterialStateProperty.resolveWith<Icon?>(
                     (Set<MaterialState> states) {
                   if (states.contains(MaterialState.selected)) {
                     return Icon(Icons.check,
                         color:
                         isLight ? colorScheme.primary : colorScheme.onPrimary);
                   }
                   // All other states will use the default thumbIcon.
                   return Icon(Icons.close, color: colorScheme.onPrimary);
                 }),
             value: isOn1.value,
             onChanged: (bool value) {

                 isOn1.value = value;

             },
           ),
           const Text('Disabled'),
           Switch(
             value: isOn1.value,
             onChanged: null,
           ),
           Switch(
             value: !isOn1.value,
             onChanged: null,
           ),
           if (showCupertinoSwitches) ...<Widget>[
             const Text('iOS'),
             CupertinoSwitch(
               activeColor: colorScheme.primary,
               value: isOn1.value,
               onChanged: (bool value) {

                   isOn1.value = value;

               },
             ),
             CupertinoSwitch(
               activeColor: colorScheme.primary,
               value: isOn1.value,
               onChanged: null,
             ),
             CupertinoSwitch(
               activeColor: colorScheme.primary,
               value: !isOn1.value,
               onChanged: (bool value) {
                   isOn1.value = !value;
               },
             ),
             CupertinoSwitch(
               activeColor: colorScheme.primary,
               value: !isOn1.value,
               onChanged: null,
             ),
           ],
         ],
       ),
     ),
   );
 }
}

themecontroller.dart

class ThemeController extends GetxController {

  ///***[Switch Settings]***

  ///Switch Thump Size Setting
  final RxBool _switchThumbFixedSize = false.obs;

  RxBool get switchThumbFixedSize => _switchThumbFixedSize;

  void setSwitchThumbFixedSize(bool? value) {
    if (value == null) return;
    if (value == _switchThumbFixedSize.value) return;
    _switchThumbFixedSize.value = value;
  }

  ///Switch Color Setting
  final RxInt switchSchemeIndex = 0.obs;
  final getSwitchSchemeColor = Rx<Color?>(null);

  void setSwitchSchemeColor(Color? color, int value) {
    getSwitchSchemeColor.value = color;
    switchSchemeIndex.value = value;
   }

  /// Switch on State Color Setting
  final RxInt switchOnStateSchemeIndex = 0.obs;
  final getSwitchOnStateSchemeColor = Rx<Color?>(null);

  void setSwitchOnStateSchemeColor(Color? color, int value) {
    getSwitchOnStateSchemeColor.value = color;
    switchOnStateSchemeIndex.value = value;
  }

  ///SwitchThemeData Settings
  SwitchThemeData buildSwitchThemeData(BuildContext context){
    return   SwitchThemeData(
        splashRadius: switchThumbFixedSize.value
            ? 10
            : 0,
        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
        overlayColor: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) {
          // Check if the button is hovered

            return getSwitchOnStateSchemeColor.value??Theme.of(context).colorScheme.primary;
          }),
        trackColor: MaterialStatePropertyAll(
            getSwitchSchemeColor.value));
  }
 }

main.dart

///In ThemeData add this code dark and light theme
switchTheme:  widget.themeController.buildSwitchThemeData(context),

Output: