Create a Radio Group of Radio Buttons options in Flutter with Dart

In this example, I will show you how to create a set of options and radio buttons in Flutter using the Dart programming language.

To do this, we will create a component that we will call CustomRadio. This element or component will have its properties and events to handle the selection of options, thus being able to use it in any view or Widget.

class CustomRadio extends StatefulWidget {
  final List<String> options;
  final String? selectedOption;
  final ValueChanged<String>? onChanged;

  const CustomRadio({
    Key? key,
    required this.options,
    this.selectedOption,
    this.onChanged,
  }) : super(key: key);

  @override
  _CustomRadioState createState() => _CustomRadioState();
}

class _CustomRadioState extends State<CustomRadio> {
  late String _selectedOption;

  @override
  void initState() {
    super.initState();
    _selectedOption = widget.selectedOption ?? widget.options.first;
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: widget.options.map((String value) {
        return RadioListTile<String>(
          title: Text(value),
          value: value,
          groupValue: _selectedOption,
          onChanged: (String? newValue) {
            if (newValue != null) {
              setState(() {
                _selectedOption = newValue;
              });
              widget.onChanged?.call(newValue);
            }
          },
        );
      }).toList(),
    );
  }
}

Now, in the MyApp view, we will use this CustomRadio component that we just created as shown below.

import 'package:flutter/material.dart';

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

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

class RadioExample extends StatefulWidget {
  @override
  _RadioExampleState createState() => _RadioExampleState();
}

class _RadioExampleState extends State<RadioExample> {
  final List<String> _options = ['Option 1', 'Option 2', 'Option 3'];
  late String _selectedOption;

  @override
  void initState() {
    super.initState();
    _selectedOption = _options.first;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
         title: Text('Example for DevCodeLight'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CustomRadio(
              options: _options,
              selectedOption: _selectedOption,
              onChanged: (String newValue) {
                setState(() {
                  _selectedOption = newValue;
                });
              },
            ),
            SizedBox(height: 20),
            Text(
              'Selected option: $_selectedOption',
              style: TextStyle(fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}

Finally, we observe below the result of the complete example.

I hope it helps you out. Have a great day!

DevCodeLight