Flutter Radio Widget with Custom Radio Buttons

In this tutorial, you will learn how to use the Radio Widget in Flutter to create radio buttons and custom radio buttons. The Radio Widget is a simple way to allow users to select one option from a list of options.

This Flutter code demonstrates the usage of the Radio widget and creating custom radio buttons in a Flutter app. The Radio widget is used to implement a group of radio buttons with a common purpose, where only one radio button can be selected at a time. 

Code Sample:

Radio<int>(
  value: index,
  groupValue: radioValue,
  onChanged: handleRadioValueChanged,
),

..

Properties:

• value (required): The value of the radio button.
• groupValue (required): The currently selected value of the radio button group.
• onChanged (required): A callback function that is called when the radio button is selected. The function should update the groupValue with the value of the selected radio button.
• activeColor: The color of the radio button when it is selected.
• fillColor: The color of the radio button when it is not selected.
• focusColor: The color of the radio button when it is focused.
• hoverColor: The color of the radio button when the pointer is hovering over it.
• visualDensity: The density of the visual components of the radio button.
• materialTapTargetSize: The size of the tap target for the radio button.
• toggleable: Whether the radio button can be toggled on and off. If set to true, the selected radio button can be deselected by tapping it again.

import 'package:flutter/material.dart';

class BasicWidgetRadio extends StatefulWidget {
  const BasicWidgetRadio({Key? key}) : super(key: key);

  @override
  State<BasicWidgetRadio> createState() => BasicWidgetRadioState();
}

class BasicWidgetRadioState extends State<BasicWidgetRadio> {

  int radioValue = 0;

  // function to handle changes in radio button value
  void handleRadioValueChanged(int? value) {
    setState(() {
      radioValue = value!;
    });
  }

  int _selectedValue = 0;

  // function to handle changes in custom radio button value
  void _onRadioValueChanged(int value) {
    setState(() {
      _selectedValue = value;
    });
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
        body: SingleChildScrollView(
          child: Center(
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisSize: MainAxisSize.max, // set mainAxisSize to max
                children: [

                  // .................................................. radio
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      for (int index = 0; index < 2; ++index)
                        Radio(
                          value: index,
                          groupValue: radioValue,
                          onChanged:  handleRadioValueChanged,
                        ),
                    ],
                  ),

                  // Disabled radio buttons
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      for (int index = 0; index < 2; ++index)
                        Radio<int>(
                          value: index,
                          groupValue: radioValue,
                          onChanged: null,
                        ),
                    ],
                  ),

                  // Custom radio button
                  CustomRadioWidget(
                    valueChanged: _onRadioValueChanged,
                    initialValue: _selectedValue,
                  ),
                ]),
          ),
        ));
  }
}

class CustomRadioWidget extends StatefulWidget {
  final Function(int) valueChanged;
  final int initialValue;

  // constructor for custom radio button widget
  const CustomRadioWidget({Key? key, required this.valueChanged, this.initialValue = 0}) : super(key: key);

  @override
  State createState() => _CustomRadioWidgetState();
}

class _CustomRadioWidgetState extends State<CustomRadioWidget> {
  int _value = 0;

  @override
  void initState() {
    super.initState();
    _value = widget.initialValue;
  }

  // function to create custom radio buttons
  Widget customRadioButton(String text, IconData iconData, int index) {
    return Padding(
      padding: const EdgeInsets.all(5),
      child: OutlinedButton(
        onPressed: () {
          setState(() {
            _value = index;
            widget.valueChanged(_value);
          });
        },
        style: OutlinedButton.styleFrom(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(40),
          ),
          side: BorderSide(
            color: (_value == index) ? Colors.blue : Colors.grey,
          ),
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(
              iconData,
              color: (_value == index) ? Colors.blue : Colors.grey,
            ),
        
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        customRadioButton("", Icons.male, 1),
        customRadioButton("", Icons.female, 2),
        customRadioButton("", Icons.category, 3)
      ],
    );
  }
}