How to Create and Customize Radio Buttons in Flutter: A Beginner’s Guide

 

Introduction

In this blog post, we will explore how to create a simple Radio Button example in Flutter. Radio buttons are a great way to present a set of options where only one option can be selected at a time. This is commonly used for gender selection, preferences, or any binary choices.

We will walk through the Flutter code required to implement a basic gender selection form using Radio Buttons. By the end of this tutorial, you will have a clear understanding of how to use Radio Buttons in Flutter and how to handle user input.

---

What is a Radio Button?

A Radio Button is a type of input control that allows users to select one option from a set of mutually exclusive options. In Flutter, you can use the Radio widget to create radio buttons, and the RadioListTile widget to combine a radio button with a text label.

Example Overview

In this example, we will create a simple application with two Radio Buttons for selecting Gender: Male and Female. We will also include a Submit button that shows a SnackBar with the selected gender when pressed.

Here is the Complete Code:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Simple Radio Button Example'),
        ),
        body: Center(
          child: GenderSelection(),
        ),
      ),
    );
  }
}

class GenderSelection extends StatefulWidget {
  @override
  _GenderSelectionState createState() => _GenderSelectionState();
}

class _GenderSelectionState extends State<GenderSelection> {
  String? _selectedGender;  // Default: null (no gender selected)

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          'Select Your Gender:',
          style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
        ),
        SizedBox(height: 20),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Radio<String>(
              value: 'Male',
              groupValue: _selectedGender,
              onChanged: (String? value) {
                setState(() {
                  _selectedGender = value;
                });
              },
            ),
            Text('Male'),
            Radio<String>(
              value: 'Female',
              groupValue: _selectedGender,
              onChanged: (String? value) {
                setState(() {
                  _selectedGender = value;
                });
              },
            ),
            Text('Female'),
          ],
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {
            if (_selectedGender == null) {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('Please select a gender')),
              );
            } else {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('Selected Gender: $_selectedGender')),
              );
            }
          },
          child: Text('Submit'),
        ),
      ],
    );
  }
}

Conclusion

In this blog post, we explored a simple example of Radio Buttons in Flutter. We learned how to create a gender selection form, handle state changes, and display the selected option using a SnackBar.

Radio Buttons are a versatile widget for many scenarios where only one option is to be selected from a set of choices. By using the Radio and RadioListTile widgets, you can easily integrate them into your Flutter applications.

For more advanced use cases and customization options, refer to the official Flutter documentation and examples.

Feel free to experiment with the code and add more features as per your requirements!