CODEWITHSUNDEEP
androidflutter
Vedha
Vedha

Reputation: 251

How to add a gap between ExpansionPanelList in flutter?

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,
  });
}

Upvotes: 0

Views: 845

Answers (3)

Ruble
Ruble

Reputation: 4824

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,
  });
}

Upvotes: 1

Ye Lwin Oo
Ye Lwin Oo

Reputation: 556

  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

Upvotes: 2

sahilatahar
sahilatahar

Reputation: 915

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

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

Upvotes: 0

Related Questions