Radio Documentation

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

‣

Customizing Radio

‣

Radio Showcase

‣

Example Radio Types

‣

Conclusion

‣

Example

   Obx(
                          () => CustomContainer(
                        title: 'Radio main color',
                        description: 'Background color',
                        child: ThemePopupMenu3(
                            schemeIndex:
                            themeController.radioSchemeIndex.value,
                            onChanged:
                            themeController.setRadioSchemeColor),
                      ),
                    ),

Widget _radioShowcase(){
  RxBool groupValue = true.obs;
  return RepaintBoundary(
    child: Obx(
      ()=> Wrap(
        crossAxisAlignment: WrapCrossAlignment.center,
        spacing: 8,
        runSpacing: 8,
        children: <Widget>[
          Radio<bool>(
            value: true,
            groupValue: groupValue.value,
            onChanged: (bool? value) {

                groupValue.value = value!;

            },
          ),
          Radio<bool>(
            value: false,
            groupValue: groupValue.value,
            onChanged: (bool? value) {

                groupValue.value = value!;

            },
          ),
          const Text('Disabled'),
          Radio<bool>(
            value: true,
            groupValue: groupValue.value,
            onChanged: null,
          ),
          Radio<bool>(
            value: false,
            groupValue: groupValue.value,
            onChanged: null,
          ),
        ],
      ),
    ),
  );
}

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: 'Radio main color',
                        description: 'Background color',
                        child: ThemePopupMenu3(
                            schemeIndex:
                            themeController.radioSchemeIndex.value,
                            onChanged:
                            themeController.setRadioSchemeColor),
                      ),
                    ),
                    const SizedBox(height: 20,),
                    _radioShowcase(),
                      ],
                    ),
                  ],
                ),
              ),
           ),
        );
      }
      
Widget _radioShowcase(){
  RxBool groupValue = true.obs;
  return RepaintBoundary(
    child: Obx(
      ()=> Wrap(
        crossAxisAlignment: WrapCrossAlignment.center,
        spacing: 8,
        runSpacing: 8,
        children: <Widget>[
          Radio<bool>(
            value: true,
            groupValue: groupValue.value,
            onChanged: (bool? value) {

                groupValue.value = value!;

            },
          ),
          Radio<bool>(
            value: false,
            groupValue: groupValue.value,
            onChanged: (bool? value) {

                groupValue.value = value!;

            },
          ),
          const Text('Disabled'),
          Radio<bool>(
            value: true,
            groupValue: groupValue.value,
            onChanged: null,
          ),
          Radio<bool>(
            value: false,
            groupValue: groupValue.value,
            onChanged: null,
          ),
        ],
      ),
    ),
  );
 }
}

themecontroller.dart
class ThemeController extends GetxController {

  ///Radio Main Color
  final RxInt radioSchemeIndex = 0.obs;
  final getRadioSchemeColor = Rx<Color?>(null);

  void setRadioSchemeColor(Color? color, int value) {
    getRadioSchemeColor.value = color;
    radioSchemeIndex.value = value;
   }
   
 RadioThemeData buildRadioThemeData(BuildContext context){
    return  RadioThemeData(
        fillColor: MaterialStatePropertyAll(
            getRadioSchemeColor.value));
  }
 }