toggleable property

Set to true if this radio button is allowed to be returned to an indeterminate state by selecting it again when selected.

To indicate returning to an indeterminate state, RadioGroup.onChanged of the RadioGroup above the widget tree will be called with null.

If true, RadioGroup.onChanged is called with value when selected while RadioGroup.groupValue != value, and with null when selected again while RadioGroup.groupValue == value.

If false, RadioGroup.onChanged will be called with value when it is selected while RadioGroup.groupValue != value, and only by selecting another radio button in the group (i.e. changing the value of RadioGroup.groupValue) can this radio button be unselected.

The default is false.

This example shows how to enable deselecting a radio button by setting the toggleable attribute.

To see it in action, copy and run this code snippet on DartPad.

import 'package:material_ui/material_ui.dart';

/// Flutter code sample for [Radio.toggleable].

void main() => runApp(const ToggleableExampleApp());

class ToggleableExampleApp extends StatelessWidget {
  const ToggleableExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Radio Sample')),
        body: const ToggleableExample(),
      ),
    );
  }
}

class ToggleableExample extends StatefulWidget {
  const ToggleableExample({super.key});

  @override
  State<ToggleableExample> createState() => _ToggleableExampleState();
}

class _ToggleableExampleState extends State<ToggleableExample> {
  int? groupValue;
  static const List<String> selections = <String>[
    'Hercules Mulligan',
    'Eliza Hamilton',
    'Philip Schuyler',
    'Maria Reynolds',
    'Samuel Seabury',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: RadioGroup<int>(
        groupValue: groupValue,
        onChanged: (int? value) {
          setState(() {
            groupValue = value;
          });
        },
        child: ListView.builder(
          itemBuilder: (BuildContext context, int index) {
            return Row(
              mainAxisSize: .min,
              children: <Widget>[
                Radio<int>(
                  value: index,
                  // TRY THIS: Try setting the toggleable value to false and
                  // see how that changes the behavior of the widget.
                  toggleable: true,
                ),
                Text(selections[index]),
              ],
            );
          },
          itemCount: selections.length,
        ),
      ),
    );
  }
}

Implementation

Radio class