ExpansionPanelList.radio constructor

const ExpansionPanelList.radio({ Key? key, List<ExpansionPanel> children = const <ExpansionPanelRadio>[], ExpansionPanelCallback? expansionCallback, Duration animationDuration = kThemeAnimationDuration, Object? initialOpenPanelValue, EdgeInsets expandedHeaderPadding = _kPanelHeaderExpandedDefaultPadding, Color? dividerColor, double elevation = 2, Color? expandIconColor, double materialGapSize = 16.0, })

Creates a radio expansion panel list widget.

This widget allows for at most one panel in the list to be open. The expansion panel callback is triggered when an expansion panel expand/collapse button is pushed. The children objects must be instances of ExpansionPanelRadio.

Here is a simple example of how to implement ExpansionPanelList.radio.

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

import 'package:material_ui/material_ui.dart';

/// Flutter code sample for [ExpansionPanelList.radio].

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

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

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

// stores ExpansionPanel state information
class Item {
  Item({
    required this.id,
    required this.expandedValue,
    required this.headerValue,
  });

  int id;
  String expandedValue;
  String headerValue;
}

List<Item> generateItems(int numberOfItems) {
  return List<Item>.generate(numberOfItems, (int index) {
    return Item(
      id: index,
      headerValue: 'Panel $index',
      expandedValue: 'This is item number $index',
    );
  });
}

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

  @override
  State<ExpansionPanelListRadioExample> createState() =>
      _ExpansionPanelListRadioExampleState();
}

class _ExpansionPanelListRadioExampleState
    extends State<ExpansionPanelListRadioExample> {
  final List<Item> _data = generateItems(8);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(child: Container(child: _buildPanel()));
  }

  Widget _buildPanel() {
    return ExpansionPanelList.radio(
      initialOpenPanelValue: 2,
      children: _data.map<ExpansionPanelRadio>((Item item) {
        return ExpansionPanelRadio(
          value: item.id,
          headerBuilder: (BuildContext context, bool isExpanded) {
            return ListTile(title: Text(item.headerValue));
          },
          body: ListTile(
            title: Text(item.expandedValue),
            subtitle: const Text(
              'To delete this panel, tap the trash can icon',
            ),
            trailing: const Icon(Icons.delete),
            onTap: () {
              setState(() {
                _data.removeWhere((Item currentItem) => item == currentItem);
              });
            },
          ),
        );
      }).toList(),
    );
  }
}

Implementation

// TODO(framework): Replace the following block with a @dartpad directive
// when it's supported. https://github.com/dart-lang/dartdoc/issues/4123
/// {@macro material_ui.dartpad_guide}
///
/// {@example /example/lib/expansion_panel/expansion_panel_list.expansion_panel_list_radio.0.dart#body}
///
/// </callout-box>
const ExpansionPanelList.radio({
  super.key,
  this.children = const <ExpansionPanelRadio>[],
  this.expansionCallback,
  this.animationDuration = kThemeAnimationDuration,
  this.initialOpenPanelValue,
  this.expandedHeaderPadding = _kPanelHeaderExpandedDefaultPadding,
  this.dividerColor,
  this.elevation = 2,
  this.expandIconColor,
  this.materialGapSize = 16.0,
}) : _allowOnlyOnePanelOpen = true;