Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to decrease space between ExpansionPanel elements in Flutter?

This is my code:

ExpansionPanel(
headerBuilder: (BuildContext context, bool isExpanded) {
  return SizedBox(
      //height: 20,
      child: ListTile(
        title: Text("Files (2)"),
        leading: Icon(Icons.folder_outlined),
        minLeadingWidth : 4,
        contentPadding: EdgeInsets.symmetric(vertical: 0.0, horizontal: 16.0),
      ),
  );
},
body: Column(
  children: [
    ListTile(
      title: Text("File_0"),
      leading: Icon(Icons.insert_drive_file),
      minLeadingWidth : 4,
      contentPadding: EdgeInsets.symmetric(vertical: 0.0, horizontal: 16.0),
    ),
    ListTile(
      title: Text("File_1"),
      leading: Icon(Icons.insert_drive_file),
      minLeadingWidth : 4,
      contentPadding: EdgeInsets.symmetric(vertical: 0.0, horizontal: 16.0),
    )
  ],
),
isExpanded: items[0].isExpanded,
),

And this is the result:

enter image description here

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

As you see the distance between Folder and files and between files is huge. Could anyone say how to decrease this distance?

>Solution :

You can modify the space/padding on ExpansionPanelList calling expandedHeaderPadding.

ExpansionPanelList(
  expandedHeaderPadding: EdgeInsets.zero,
  children: [
    ExpansionPanel(

listTile provide default height based on

maxHeight: (isDense ? 48.0 : 56.0) + densityAdjustment.dy,

You can create custom row widget for this.

ExpansionPanel(
  headerBuilder: (BuildContext context, bool isExpanded) {
    return ListTile(
      title: Text("Files (2)"),
      leading: Icon(Icons.folder_outlined),
      minLeadingWidth: 4,
      contentPadding:
          EdgeInsets.symmetric(vertical: 0.0, horizontal: 0.0),
    );
  },
  body: Column(
    children: [
      ...List.generate(
          3,
          (index) => Padding(
                padding: const EdgeInsets.only(left: 8.0, top: 4),
                child: Row(
                  //decorate items the way you like
                  children: [
                    Icon(Icons.insert_drive_file),
                    SizedBox(
                      width: 16,
                    ),
                    Text("File_$index"),
                  ],
                ),
              ))
    ],
  ),
  isExpanded: true,
),

More about expandedHeaderPadding and ExpansionPanelList on flutter.dev.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading