Flutter: How to reduce default height of Expansion Tile in Flutter

Question

I have an expansion tile in my app. I want to reduce the default height of this widget. I have used different solutions available but none works as expected. Below is my code snippet.

                  child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 18.0),
                  child: ListTileTheme(
                    dense: true,
                    horizontalTitleGap: 0.0,
                    minLeadingWidth: 0,
                    contentPadding: EdgeInsets.zero,
                    child: ExpansionTile(
                      title: AppText(
                        '+ More',
                        textStyle: textStyle,
                        textAlign: TextAlign.center,
                      ),

                      backgroundColor: AppColors.whiteColor,
                      collapsedBackgroundColor: AppColors.whiteColor,
                      shape: const RoundedRectangleBorder(
                        borderRadius: BorderRadius.zero,
                      ),
                      trailing: const SizedBox(height: 0),
                      children: const <Widget>[
                        ListTile(title: Text('This is tile number 1')),
                      ],
                    ),
                  ),
                ),

Answer 1

There is no easy configuration option, you need to check the source code.

In the source code of ListTile (list_tile.dart) there is a function that calculates the title height:

double get _defaultTileHeight {
  final bool hasSubtitle = subtitle != null;
  final bool isTwoLine = !isThreeLine && hasSubtitle;
  final bool isOneLine = !isThreeLine && !hasSubtitle;

  final Offset baseDensity = visualDensity.baseSizeAdjustment;
  if (isOneLine) {
    return (isDense ? 48.0 : 56.0) + baseDensity.dy;
  }
  if (isTwoLine) {
    return (isDense ? 64.0 : 72.0) + baseDensity.dy;
  }
  return (isDense ? 76.0 : 88.0) + baseDensity.dy;
}

As you see the height depends on a couple of things:

• whether it has a subtitle,
• whether it is configured as three line,
• whether it is configured as dense,
• the theme's visual density.

Based on this, if you need to reduce the height you need to have a dense tile, without subtitle and a negative visual density, because the default is too high for you.

Now this a little hacky and some small values for visual density will throw an error but you can try the following code (maybe adjust the negative value in vertical::

child: Padding(
  padding: const EdgeInsets.symmetric(horizontal: 18.0),
  child: Theme(
      data: ThemeData(visualDensity: VisualDensity(vertical: -4)),
      child: ListTileTheme(
          data: ListTileThemeData(
            dense: true,
          ),
          child: ExpansionTile(...))),
),