In flutter, I am trying to create an ExpansionPanelList and I want to add space between the expansion tiles. Can anyone help me with this

Here's the code I've used:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: ExpansionPanelList.radio(
            children: items
                .map(
                  (e) => ExpansionPanelRadio(
                      canTapOnHeader: true,
                      value: e.header,
                      headerBuilder: (context, isExpanded) => ListTile(
                            title: Text(
                              e.header,
                              style: const TextStyle(fontSize: 20),
                            ),
                          ),
                      body: ListTile(
                        title:
                            Text(e.body, style: const TextStyle(fontSize: 20)),
                      )),
                )
                .toList(),
          ),
        ),
      ),
    );
  }


class Item {
  final String header;
  final String body;

  Item({
    required this.header,
    required this.body,
  });
}

CodePudding user response：

(1) Wrap the ExpansionPanleRadio within padding and put only bottom padding.

(2) check that may be it has margin property.

CodePudding user response：

1. Actually, you can't. When expansion list is folded, you can't set space betweeen ExpansionPanelRadio. There are limited parameters in ExpansionPanelRadio and there is no margin parameter in it.

2. Also, you can't wrap your ExpansionPanelRadio in Padding because ExpansionPanelList.radio children must be List<ExpansionPanelRadio>. So, I don't recommend customizing it. It takes a lot of effort.

What I recommend is using https://pub.dev/packages/accordion plugin. It gives you full control of your Expansion List and it's easy to use.

Here's what it looks like when using this plugin:

https://raw.githubusercontent.com/GotJimmy/accordion/master/assets/accordion_demo.gif

Have Fun TT

CodePudding user response：

You can use ExpansionTile inside the ListView instead of ExpansionPanelList widget.

Full example:

main() {
  runApp(const MaterialApp(home: MyApp()));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final List<Item> items = List.generate(
        5, (index) => Item(header: 'header$index', body: 'body$index'));

    return ListView.builder(
      itemBuilder: (BuildContext context, int index) => Padding(
        padding: const EdgeInsets.symmetric(horizontal: 8.0),
        child: _buildTiles(items[index]),
      ),
      itemCount: items.length,
    );
  }

  Widget _buildTiles(Item item) {
    return Card(
      child: ExpansionTile(
        key: ValueKey(item),
        title: ListTile(
          title: Text(
            item.header,
            style: const TextStyle(fontSize: 20),
          ),
        ),
        children: [
          ListTile(
            title: Text(item.body, style: const TextStyle(fontSize: 20)),
          )
        ],
      ),
    );
  }
}

class Item {
  final String header;
  final String body;

  Item({
    required this.header,
    required this.body,
  });
}