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')),
                      ],
                    ),
                  ),
                ),

Peter Koltai · Answer 1 · 2023-06-03T12:13:12.667

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(...))),
),

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

1 Answers1