How to add a gap between ExpansionPanels in flutter?

Question

I have an ExpansionPanelList and I want to create a gap instead of the divider between the expansion tiles when it is not expanded. There is only an option to add elevation but not margin to the ExpansionPanelList

Here's the code I've used:

ExpansionPanelList(
  expansionCallback: (int index, bool isExpanded) {
    setState(() {
      orders[index].isExpanded = !orders[index].isExpanded;
    });
  },
  children: orders.map((OrderDetails order) {
    return ExpansionPanel(
      headerBuilder: (context, isExpanded) {
        return InkWell(
          onTap: () {
            Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => TrackOrder(
                      orderID: order.orderID,
                      total: order.total,
                    )));
          },
          child: Row(
            children: <Widget>[
              Container(
                margin: EdgeInsets.all(20),
                decoration: BoxDecoration(
                    color: MyColors.PrimaryColor.withOpacity(
                        0.2),
                    borderRadius: BorderRadius.circular(50)),
                child: IconButton(
                  onPressed: () {},
                  icon: Icon(
                    CupertinoIcons.cube_box_fill,
                    color: MyColors.PrimaryColor,
                    size: 22,
                  ),
                ),
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    'Order #${order.orderID}',
                    style: TextStyle(
                        color: Colors.black,
                        fontSize: 18,
                        fontWeight: FontWeight.bold),
                  ),
                  SizedBox(
                    height: 4,
                  ),
                  Row(
                    children: [
                      Text(
                        'Total: ',
                        style: TextStyle(
                          color: Colors.black,
                          fontSize: 13,
                        ),
                      ),
                      Text(
                        '₹${order.total}',
                        style: TextStyle(
                            color: Colors.black,
                            fontSize: 13,
                            fontWeight: FontWeight.w800),
                      ),
                    ],
                  ),
                ],
              )
            ],
          ),
        );
      },
      isExpanded: order.isExpanded,
      body: Container(
        padding: EdgeInsets.symmetric(horizontal: 15),
        width: MediaQuery.of(context).size.width,
        height: 100,
        decoration: BoxDecoration(
          color: Colors.white,
        ),
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Row(
              mainAxisSize: MainAxisSize.max,
              children: [
                Image.network(
                  order.image,
                  width: 60,
                  height: 60,
                  fit: BoxFit.fill,
                ),
                SizedBox(width: 15,),
                Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      order.productTitle,
                      style: TextStyle(
                        fontFamily: 'Poppins',
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    Text(
                      'Price: ${order.price}',
                      style: TextStyle(
                        fontFamily: 'Poppins',
                      ),
                    ),
                    Text(
                      'Quantity: ${order.quantity}',
                      style: TextStyle(
                        fontFamily: 'Poppins',
                      ),
                    )
                  ],
                )
              ],
            ),
            Text(
              'Status: ${order.type}',
              style: TextStyle(
                color: MyColors.PrimaryColor,
              ),
            )
          ],
        ),
      ), 
    );
  }
).toList(),
),

This is how it is right now:

But I want to look like this even when it is not expanded, notice the gap between the tiles:

Answer 1

You can use ExpansionTile inside the ListView instead of ExpansionPanelList widget

Refer this Link https://esflutter.dev/docs/catalog/samples/expansion-tile-sample for ExpansionTile.

Add Padding for ListView to get the gap between each tile.

 body: ListView.builder(
          itemBuilder: (BuildContext context, int index) =>
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 8.0),
                child: EntryItem(data[index]
                ),
              ),
          itemCount: data.length,
        ),

and then wrap the ExpansionTile with Card

Widget _buildTiles(Entry root) {
    if (root.children.isEmpty) return ListTile(title: Text(root.title));
    return Card(
      child: ExpansionTile(
        key: PageStorageKey<Entry>(root),
        title: Text(root.title),
        children: root.children.map(_buildTiles).toList(),
      ),
    );
  }