How to add a gap between ExpansionPanels in flutter?

user_14228678 0
Viewed 1204

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: enter image description here

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

flutter-layout dart flutter
1 Answers

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

Output:

user_130528640
Related