Crear un Radio Group de opciones Radio Buttons en Flutter con Dart

Tiempo de lectura: 2 minutos

En este ejemplo voy a mostrar cómo crear un conjunto de opciones y botones radios en Flutter en el lenguaje de programación Dart.

Para ello vamos a crear un componente que vamos a llamar en este caso CustomRadio. Este elemento o componente, tendrá sus propiedades y eventos para manejar la selección de opciones, y así, poder usarlo en cualquier vista o 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(),
    );
  }
}

Ahora, en la vista MyApp, usaremos este componente CustomRadio que acabamos de crear como muestro a continuación.

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('Ejemplo para 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),
            ),
          ],
        ),
      ),
    );
  }
}

Por último, observamos a continuación el resultado del ejemplo completo.

Espero que les sirva de ayuda. ¡Que tengan un feliz día!