Flutter ExpansionTile title vertical padding

Question

How can I remove vertical padding in leading Widget in ExpansionTile so it looks like ListTile below it?

Here is my code:

Container(
  decoration: BoxDecoration(
    border: Border.all(color: Color.fromRGBO(200, 200, 200, 1), width: 2),
    borderRadius: BorderRadius.all(Radius.circular(10)),
  ),
  child: ListTileTheme(
    contentPadding: EdgeInsets.zero,
    dense: true,
    child: ExpansionTile(
        childrenPadding: EdgeInsets.zero,
        tilePadding: EdgeInsets.zero,
        title: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20),
          child: Text(Constants.texts.chooseFromList,
              style: Constants.textStyles.lightGreyMediumSize),
        ),
        children: [
          Text('One'),
          Text('Two'),
          Text('Three'),
        ],
        trailing: Image.asset(
          'assets/icons/snn_app_ubytovanie_filter_open_button_merged_idle_crop.png',
        )),
  ),
)

Code for ListTile under it is following:

Container(
      decoration: BoxDecoration(
        border: Border.all(
            color: Color.fromRGBO(200, 200, 200, 1), width: 2),
        borderRadius: BorderRadius.all(Radius.circular(10)),
      ),
      child: ListTileTheme(
        contentPadding: EdgeInsets.zero,
        dense: true,
        child: ListTile(
          title: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20),
            child: Text("Here it works!",
                style: Constants.textStyles.lightGreyMediumSize),
          ),
          trailing: Image.asset(
            'assets/icons/snn_app_ubytovanie_filter_open_button_merged_idle_crop.png',
          ),
        ),
      ),
    )

I alredy copy&paste and refactor source code for ExpansionTile from flutter repo but I can't seem to figure out what is causing the padding. Please any advice is much appreciated.

user_5675642 · Answer

Ok so I have found that what is cousing a gap is actuly transparent border in original ExpansionTile source code here:

Container(
  decoration: BoxDecoration(
    color: _backgroundColor.value ?? Colors.transparent,
    border: Border(
      top: BorderSide(color: borderSideColor),
      bottom: BorderSide(color: borderSideColor),
    ),
  ),

Although it derives it's color from backgroundColor parameter, only work-around I found to solve my issue was to edit source code for original ExpansionTile and delete BoxDecoration. Hope this helps anyone with same issue.

Flutter ExpansionTile title vertical padding

1 Answers