A Deep Dive into Flutter's Radio Button Widget

In Flutter, building interactive and intuitive UIs is made easier with widgets that provide various interactive functionalities. One such widget is the Radio Button. Radio buttons are used when you want to allow users to select a single option from a predefined set of choices. When a user selects one option, all other options in the same group are automatically deselected. This behavior is typically used in forms, surveys, and settings screens.

What is a Radio Button?

A Radio Button is a UI element that lets the user select one option from a set of mutually exclusive options. All the options in a group are associated with a single groupValue, which ensures that only one option can be selected at a time.

When a user selects a radio button, its value is returned, and the widget updates its appearance to show the selected state. Flutter provides the Radio widget to implement this functionality.

The `Radio` Widget in Flutter

In Flutter, the Radio widget is part of the flutter/material.dart package. It allows the user to select a single option from a set. Let’s look at its key properties and how you can use them in your Flutter app.

Key Properties of the `Radio` Widget

value
- Type: T
- Description: This property defines the value associated with the radio button. When the radio button is selected, this value is passed back to the onChanged callback. This value is typically an integer, string, or any other data type you need to represent the selected option.
- Example:
- ```
  Radio<int>(
    value: 1,
    groupValue: _selectedOption,
    onChanged: (int? value) {
      setState(() {
        _selectedOption = value!;
      });
    },
  )
```
- In this example, when the radio button is selected, the value 1 will be returned.
groupValue
- Type: T
- Description: This property holds the value that indicates which radio button in the group is selected. It must match the value of the radio button that is currently selected. This property binds all radio buttons in the same group, ensuring only one can be selected at a time.
- Example:
- ```
  Radio<int>(
    value: 1,
    groupValue: _selectedOption,
    onChanged: (int? value) {
      setState(() {
        _selectedOption = value!;
      });
    },
  )
```
- In this case, _selectedOption holds the currently selected option, which is compared with the value of each radio button in the group to highlight the selected one.
onChanged
- Type: ValueChanged<T>?
- Description: The onChanged property is a callback function that is invoked when a radio button is selected. It receives the value of the selected radio button as a parameter. You typically update the groupValue in this callback to reflect the change in state.
- Example:
```
onChanged: (T? value) {
  setState(() {
    _selectedOption = value!;
  });
}
```
- This function updates the selected option (_selectedOption) whenever a user selects a new radio button.

activeColor

Type: Color?
Description: This property specifies the color of the radio button when it is selected (active). If you don't provide a custom color, it will use the theme’s primary color by default.
Example:

  Radio<int>(
    value: 1,
    groupValue: _selectedOption,
    onChanged: (int? value) {
      setState(() {
        _selectedOption = value!;
      });
    },
    activeColor: Colors.blue,  // Active color when selected
  )

focusColor

Type: Color?
Description: Defines the color of the radio button when it is focused, such as when it is selected using the keyboard or another focus event.
Example:

  Radio<int>(
    value: 1,
    groupValue: _selectedOption,
    onChanged: (int? value) {
      setState(() {
        _selectedOption = value!;
      });
    },
    focusColor: Colors.green,  // Color when focused
  )

hoverColor

Type: Color?
Description: Sets the color of the radio button when it is hovered over with a mouse pointer. This is particularly useful for web and desktop applications.
Example:

  Radio<int>(
    value: 1,
    groupValue: _selectedOption,
    onChanged: (int? value) {
      setState(() {
        _selectedOption = value!;
      });
    },
    hoverColor: Colors.orange,  // Color when hovered
  )

materialTapTargetSize

Type: MaterialTapTargetSize?
Description: Controls the tap target size of the radio button. By default, it is set to MaterialTapTargetSize.padded, but you can adjust it to be shrinkWrap to reduce the size of the tap area.
Example:

  Radio<int>(
    value: 1,
    groupValue: _selectedOption,
    onChanged: (int? value) {
      setState(() {
        _selectedOption = value!;
      });
    },
    materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,  // Smaller tap target
  )

visualDensity

Type: VisualDensity?
Description: Defines how compact or spacious the radio button should be. This is useful when you want to adjust the layout based on the density of surrounding elements.
Example:

  Radio<int>(
    value: 1,
    groupValue: _selectedOption,
    onChanged: (int? value) {
      setState(() {
        _selectedOption = value!;
      });
    },
    visualDensity: VisualDensity(horizontal: 0, vertical: -2),  // Adjust vertical spacing
  )

toggleable

Type: bool
Description: If set to true, the radio button can be deselected when it is tapped. This can be useful in cases where you want to allow users to deselect an option.
Example:

  Radio<int>(
    value: 1,
    groupValue: _selectedOption,
    onChanged: (int? value) {
      setState(() {
        _selectedOption = value!;
      });
    },
    toggleable: true,  // Allow deselection
  )

Practical Example: Implementing Radio Buttons for Gender Selection

Let’s now look at a practical example where we use radio buttons to select a gender.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GenderSelectionScreen(),
    );
  }
}

class GenderSelectionScreen extends StatefulWidget {
  @override
  _GenderSelectionScreenState createState() => _GenderSelectionScreenState();
}

class _GenderSelectionScreenState extends State<GenderSelectionScreen> {
  String? _selectedGender; // To hold the selected gender value

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Gender Selection"),
      ),
      body: Padding(
        padding: EdgeInsets.all(20),
        child: Column(
          children: [
            Text("Select Gender:"),
            Row(
              children: [
                Radio<String>(
                  value: 'Male',
                  groupValue: _selectedGender,
                  onChanged: (String? value) {
                    setState(() {
                      _selectedGender = value;
                    });
                  },
                  activeColor: Colors.blue,  // Active color when selected
                ),
                Text('Male'),
                Radio<String>(
                  value: 'Female',
                  groupValue: _selectedGender,
                  onChanged: (String? value) {
                    setState(() {
                      _selectedGender = value;
                    });
                  },
                  activeColor: Colors.blue,
                ),
                Text('Female'),
              ],
            ),
            SizedBox(height: 20),
            Text('Selected Gender: $_selectedGender'),
          ],
        ),
      ),
    );
  }
}

Explanation:

Stateful Widget: We use a StatefulWidget because the value of the selected radio button will change as the user interacts with it.
Radio Buttons: We have two radio buttons—one for 'Male' and one for 'Female'. The groupValue is set to _selectedGender, which keeps track of the selected gender.
onChanged: When a user taps on a radio button, the onChanged callback updates the _selectedGender variable and calls setState(), causing the UI to rebuild and reflect the selected option.
activeColor: The activeColor property is set to blue, so when a radio button is selected, it will appear blue.

Example: Using `enum` with `Radio` Widget

In this example, we will create an enum to represent different payment methods (CreditCard, DebitCard, PayPal), and then we will use Radio buttons to let the user select one of these options.

Step 1: Define the `enum`

First, let's define the enum that will represent the available payment methods:

enum PaymentMethod { CreditCard, DebitCard, PayPal }

Step 2: Create the `StatefulWidget` for the Payment Selection Screen

Next, let's create a stateful widget that will display the radio buttons for the user to select a payment method.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PaymentMethodSelectionScreen(),
    );
  }
}

class PaymentMethodSelectionScreen extends StatefulWidget {
  @override
  _PaymentMethodSelectionScreenState createState() => _PaymentMethodSelectionScreenState();
}

class _PaymentMethodSelectionScreenState extends State<PaymentMethodSelectionScreen> {
  PaymentMethod? _selectedPaymentMethod = PaymentMethod.CreditCard; // Default value

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Select Payment Method"),
      ),
      body: Padding(
        padding: EdgeInsets.all(20),
        child: Column(
          children: [
            Text("Choose your payment method:"),
            ListTile(
              title: Text("Credit Card"),
              leading: Radio<PaymentMethod>(
                value: PaymentMethod.CreditCard,
                groupValue: _selectedPaymentMethod,
                onChanged: (PaymentMethod? value) {
                  setState(() {
                    _selectedPaymentMethod = value;
                  });
                },
                activeColor: Colors.blue,
              ),
            ),
            ListTile(
              title: Text("Debit Card"),
              leading: Radio<PaymentMethod>(
                value: PaymentMethod.DebitCard,
                groupValue: _selectedPaymentMethod,
                onChanged: (PaymentMethod? value) {
                  setState(() {
                    _selectedPaymentMethod = value;
                  });
                },
                activeColor: Colors.blue,
              ),
            ),
            ListTile(
              title: Text("PayPal"),
              leading: Radio<PaymentMethod>(
                value: PaymentMethod.PayPal,
                groupValue: _selectedPaymentMethod,
                onChanged: (PaymentMethod? value) {
                  setState(() {
                    _selectedPaymentMethod = value;
                  });
                },
                activeColor: Colors.blue,
              ),
            ),
            SizedBox(height: 20),
            Text('Selected Payment Method: ${_selectedPaymentMethod.toString().split('.').last}'),
          ],
        ),
      ),
    );
  }
}

Explanation of the Code:

Enum Declaration:
We define an enum named PaymentMethod that has three values: CreditCard, DebitCard, and PayPal. This enum will represent the payment options in our radio buttons.
StatefulWidget:
We create a StatefulWidget called PaymentMethodSelectionScreen because we need to update the UI based on the selected radio button.
groupValue and value:
Each Radio widget has a value property that corresponds to one of the enum values (PaymentMethod.CreditCard, PaymentMethod.DebitCard, or PaymentMethod.PayPal). The groupValue is the currently selected option, and it is updated when the user selects a different radio button.
onChanged Callback:
The onChanged callback is called when a user selects a different radio button. Inside the callback, we update the _selectedPaymentMethod value using setState, which triggers a rebuild of the widget.
Displaying the Selected Payment Method:
At the bottom of the screen, we display the selected payment method using the toString().split('.').last method to extract the name of the enum value (e.g., CreditCard, DebitCard, or PayPal).

Key Concepts:

Enum in Dart: Enums are useful for defining a fixed set of constant values. In this case, the PaymentMethod enum defines a fixed set of payment options.
Radio with Enum: By using an enum for the radio button's value, you can leverage type safety, ensuring that only valid options can be selected, and making the code more maintainable and readable.

Conclusion

The Radio widget in Flutter provides an easy-to-use way to allow users to select a single option from a set. By understanding its properties like value, groupValue, onChanged, activeColor, and others, you can customize the widget's appearance and behavior to suit your app’s needs. Flutter’s rich set of customization options makes it a great choice for creating engaging and user-friendly forms and settings screens.

With this guide, you should now have a clear understanding of how to use radio buttons in Flutter, along with practical examples to integrate them into your own apps.

Happy coding!😀

Search This Blog

Flutter Blogs