ExpansionTile Unable to remove right padding from title

Steps to reproduce

Run the provided code

Expected results

The ExpansionTile's title spans the available width.

Actual results

The tile is cut short by 32.0 units.

Code sample

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ListTileTheme(
                contentPadding: EdgeInsets.zero,
                horizontalTitleGap: 0,
                minVerticalPadding: 0,
                dense: true,
                child: ExpansionTile(
                  tilePadding: EdgeInsets.zero,
                  title: Container(
                    color: Colors.red,
                    alignment: Alignment.centerLeft,
                    child: Text('Expansion Tile'),
                    height: 50,
                  ),
                  trailing: const SizedBox.shrink(),
                  children: const [
                    ListTile(title: Text('Item 1')),
                    ListTile(title: Text('Item 2')),
                    ListTile(title: Text('Item 3')),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Screenshots or Video

~~I traced it down to list_tile.dart's performLayout where it says:~~

~~Removing the 32.0 from the adjustedTrailingWidth computation and putting in 0.0 instead makes the title span the full width as expected.~~

~~I ran tests with the changed value:~~

~/Flutter/flutter/packages/flutter > flutter test ./test/material/list_tile_test.dart 
Resolving dependencies... 
  leak_tracker 10.0.0 (10.0.4 available)
  leak_tracker_flutter_testing 2.0.1 (3.0.3 available)
  leak_tracker_testing 2.0.1 (3.0.1 available)
  material_color_utilities 0.8.0 (0.11.1 available)
  meta 1.11.0 (1.12.0 available)
  test_api 0.6.1 (0.7.0 available)
  vm_service 13.0.0 (14.1.0 available)
  web 0.4.0 (0.5.1 available)
Got dependencies!
8 packages have newer versions incompatible with dependency constraints.
Try `flutter pub outdated` for more information.
00:08 +68: All tests passed!

~~So either there are more and just testing list_tile is not enough or it is not tested. I assume goldens would break.~~

See below comment for better analysis.

What is the reason why the value is 32.0?

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

[✓] Flutter (Channel stable, 3.19.2, on macOS 14.3 23D56 darwin-arm64, locale en-CZ)
    • Flutter version 3.19.2 on channel stable at /Users/michalhazdra/Flutter/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 7482962148 (3 weeks ago), 2024-02-27 16:51:22 -0500
    • Engine revision 04817c99c9
    • Dart version 3.3.0
    • DevTools version 2.31.1

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/michalhazdra/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15C500b
    • CocoaPods version 1.14.3

[✗] Chrome - develop for the web (Cannot find Chrome executable at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.

[✓] Android Studio (version 2023.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)

[✓] IntelliJ IDEA Ultimate Edition (version 2023.2.3)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.87.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.84.0

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

Upon further inspection it seems that the issue is final bool hasTrailing = trailing != null; Because if hasTrailing == false then the value is correctly set to 0.0. But ExpansionTile works by trailing: widget.trailing ?? _buildTrailingIcon(context), So if you do not provide a trailing widget, the ExpansionTile will add one itself, so you must provide SizedBox.shrink() or equivalent to get rid of the default one. But by doing so you force hasContent == true in the underlying ListTile.

So a better fix would be trailing: widget.trailing ?? (widget.showTrailingIcon ? _buildTrailingIcon(context) : null), or something along those lines.

Where showTrailingIcon would default to true to keep original behavior.

@Michal-MK

@Michal-MK
Thanks for the report. I think trailing: const SizedBox.shrink() is the correct to way to get rid of this trailing padding.

Instead of introducing a new bool parameter, we could the trailing widget has zero size and skip rendering _buildIcon.

I think the issue is valid. The example above applied SizedBox.shrink() to trailing but the issue persists. Looking at expansion_tile.dart source code, _buildTrailingIcon will fall back to _buildIcon which always renders a Icon(Icons.expand_more) but not quite sure why this check doesn't work:

flutter/packages/flutter/lib/src/material/expansion_tile.dart

Line 712 in c6f2b53

trailing: widget.trailing ?? _buildTrailingIcon(context),

flutter/packages/flutter/lib/src/material/expansion_tile.dart

Lines 638 to 643 in c6f2b53

    
           Widget? _buildIcon(BuildContext context) { 
        
             return RotationTransition( 
        
               turns: _iconTurns, 
        
               child: const Icon(Icons.expand_more), 
        
             ); 
        
           }

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.19.3, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.19.3 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ba39319843 (6 hours ago), 2024-03-07 15:22:21 -0600
    • Engine revision 2e4ba9c6fb
    • Dart version 3.3.1
    • DevTools version 2.31.1

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15C500b
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

[✓] VS Code (version 1.87.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.84.0

[✓] Connected device (3 available)
    • iPhone (mobile) • d9a94afe2b649fef56ba0bfeb052f0f2a7dae95e • ios            • iOS 15.8 19H370
    • macOS (desktop) • macos                                    • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)    • chrome                                   • web-javascript • Google Chrome 122.0.6261.112

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[!] Flutter (Channel master, 3.21.0-9.0.pre.33, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.21.0-9.0.pre.33 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision dd865ce476 (2 hours ago), 2024-03-17 20:24:27 -0400
    • Engine revision 89c7759639
    • Dart version 3.4.0 (build 3.4.0-242.0.dev)
    • DevTools version 2.33.1
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15C500b
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

[✓] VS Code (version 1.87.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.84.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 122.0.6261.129

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

@Michal-MK

@Michal-MK Thanks for the report. I think trailing: const SizedBox.shrink() is the correct to way to get rid of this trailing padding.

Instead of introducing a new bool parameter, we could the trailing widget has zero size and skip rendering _buildIcon.

Trailing is just a Widget?, how would we check it's size? Would that mean modifying ListTile stuff?

not quite sure why this check doesn't work:
trailing: widget.trailing ?? _buildTrailingIcon(context),

Which check? If a widget is provided then we build it; instead of the default icon. The check works.

The issue is that there is no way to put null into trailing which is what then messes up the ListTile's layout. The code below is taken from performLayout of ListTile. No idea how to link code like you did ;)

    final double adjustedTrailingWidth = hasTrailing
        ? math.max(trailingSize.width + _effectiveHorizontalTitleGap, 32.0)
        : 0.0;

Because hasTrailing is true no matter what, a 32.0 gap is inserted by the ListTile.
@huycozy

Which check? If a widget is provided then we build it; instead of the default icon. The check works.

I was mistaken about the trailing falls to _buildTrailingIcon. Yes, the check works.

Because hasTrailing is true no matter what, a 32.0 gap is inserted by the ListTile.

I think this is correct. When modifying this gap value to 0, the right padding is also removed.

Demo (zero gap)

But I am not sure why the 32.0 is in the ListTile, but I would rather not touch it, because it probably has a reason :) That is why I currently have the extra property in ExpansionTile to resolve it as high up as possible. And allow null to enter the ListTile

I think we should move the conversation to the assosiated PR.

`ExpansionTile` Unable to remove right padding from title (#145271)

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

`ExpansionTile` Unable to remove right padding from title (flutter#14…

Navigation Menu

Repository navigation

`ExpansionTile` Unable to remove right padding from title #145268

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	Widget? _buildIcon(BuildContext context) {
	return RotationTransition(
	turns: _iconTurns,
	child: const Icon(Icons.expand_more),
	);
	}

ExpansionTile Unable to remove right padding from title #145268

Description

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Activity

Michal-MK commented on Mar 16, 2024

TahaTesser commented on Mar 18, 2024

huycozy commented on Mar 18, 2024

Michal-MK commented on Mar 18, 2024

huycozy commented on Mar 19, 2024

Michal-MK commented on Mar 19, 2024

Michal-MK commented on Mar 19, 2024

github-actions commented on Apr 19, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

`ExpansionTile` Unable to remove right padding from title #145268