Saltar al contenido principal

Rediseño del Widget Radio

Conoce los cambios en el Widget Radio en Flutter 3.35.

Resumen

#

Se introdujo el Widget RadioGroup para centralizar la gestión de groupValue y el callback onChanged para un conjunto de Widgets Radio. Como resultado, las propiedades individuales Radio.groupValue y Radio.onChanged han quedado obsoletas (deprecated).

Contexto

#

Para cumplir con los requisitos de la APG (Guía de prácticas ARIA) para la navegación por teclado y propiedades semánticas en grupos de botones de opción (radio buttons), Flutter necesitaba un concepto de grupo de radio dedicado. La introducción de un Widget de envoltura (wrapper), RadioGroup, proporciona este soporte de forma predeterminada. Este cambio también presentó la oportunidad de simplificar la API para los Widgets Radio individuales.

Descripción del cambio

#

La siguiente API ha quedado obsoleta (deprecated):

  • Radio.onChanged
  • Radio.groupValue
  • CupertinoRadio.onChanged
  • CupertinoRadio.groupValue
  • RadioListTile.groupValue
  • RadioListTile.onChanged.

Guía de migración

#

Si estás utilizando estas propiedades, puedes refactorizarlas con RadioGroup.

Caso 1: caso trivial

#

Código antes de la migración:

dart 
Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      Radio<int>(
        value: 0,
        groupValue: _groupValue,
        onChanged: (int? value) {
          setState(() {
            _groupValue = value;
          });
        },
      ),
      Radio<int>(
        value: 2,
        groupValue: _groupValue,
        onChanged: (int? value) {
          setState(() {
            _groupValue = value;
          });
        },
      ),
    ],
  );
}

Código después de la migración:

dart 
Widget build(BuildContext context) {
  return RadioGroup<int>(
    groupValue: _groupValue,
    onChanged: (int? value) {
      setState(() {
        _groupValue = value;
      });
    },
    child: Column(
      children: <Widget>[
        Radio<int>(value: 0),
        Radio<int>(value: 2),
      ],
    ),
  );
}

Caso 2: radio deshabilitado

#

Código antes de la migración:

dart 
Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      Radio<int>(
        value: 0,
        groupValue: _groupValue,
        onChanged: (int? value) {
          setState(() {
            _groupValue = value;
          });
        },
      ),
      Radio<int>(
        value: 2,
        groupValue: _groupValue,
        onChanged: null, // disabled
      ),
    ],
  );
}

Código después de la migración:

dart 
Widget build(BuildContext context) {
  return RadioGroup<int>(
    groupValue: _groupValue,
    onChanged: (int? value) {
      setState(() {
        _groupValue = value;
      });
    },
    child: Column(
      children: <Widget>[
        Radio<int>(value: 0),
        Radio<int>(value: 2, enabled: false),
      ],
    ),
  );
}

Caso 3: grupo mixto o selección múltiple

#

Código antes de la migración:

dart 
Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      Radio<int>(
        value: 1,
        groupValue: _groupValue,
        onChanged: (int? value) {
          setState(() {
            _groupValue = value;
          });
        }, // disabled
      ),
      Radio<String>(
        value: 'a',
        groupValue: _stringValue,
        onChanged: (String? value) {
          setState(() {
            _stringValue = value;
          });
        },
      ),
      Radio<String>(
        value: 'b',
        groupValue: _stringValue,
        onChanged: (String? value) {
          setState(() {
            _stringValue = value;
          });
        },
      ),
      Radio<int>(
        value: 2,
        groupValue: _groupValue,
        onChanged: (int? value) {
          setState(() {
            _groupValue = value;
          });
        }, // disabled
      ),
    ],
  );
}

Código después de la migración:

dart 
Widget build(BuildContext context) {
  return RadioGroup<int>(
    groupValue: _groupValue,
    onChanged: (int? value) {
      setState(() {
        _groupValue = value;
      });
    },
    child: Column(
      children: <Widget>[
        Radio<int>(value: 1),
        RadioGroup<String>(
          child: Column(
            children: <Widget>[
              Radio<String>(value: 'a'),
              Radio<String>(value: 'b'),
            ]
          ),
        ),
        Radio<int>(value: 2),
      ],
    ),
  );
}

Timeline

#

Llegó en la versión: 3.34.0-0.0.pre
En lanzamiento estable: 3.35

Referencias

#

Documentación de la API:

Problema relevante:

PR relevante:

A menos que se indique lo contrario, la documentación de este sitio refleja Flutter 3.44.0. Página actualizada por última vez el 2026-05-05. Ver código fuente oreportar un problema.