Flutter Question posted in
The official Flutter documentation can be found here.

Flutter ExpansionTile Remove Title Padding

I’m using ExpansionTile to expand/collapse a widget.
I have a problem where the title has unwanted padding around it.
Tested all of the parameters but none of them seem to get the job done:

// my widget
ExpansionTile(
          controller: widget.controller,
          maintainState: !widget.rebuildOnExpand,
          title: widget.widgetClick,
          leading: widget.leading ?? const SizedBox.shrink(),
          trailing: widget.trailing, // ?? const SizedBox.shrink(),
          expandedCrossAxisAlignment: CrossAxisAlignment.center,
          onExpansionChanged: widget.onExpansionChanged,
          childrenPadding: EdgeInsets.zero,
          children: widget.children,
        ),
        
// the rest of the settings inside ThemeData
ExpansionTileThemeData(
          tilePadding: const EdgeInsets.symmetric(horizontal: 10),
          childrenPadding: EdgeInsets.zero,
          expandedAlignment: Alignment.topCenter,
          iconColor: Colors.white,
        ),

The result (Note: I added a blue container around my title widget to demonstrate the problem):

enter image description here

My goal is for the title (the blue area) to fill up all available space between the left corner and the arrow on the right

Problem #2: Unwanted padding between title and children (red area = children)
enter image description here

Tags:

2

Answers


  1. 0

    You can try :

    ExpansionTile(
    childrenPadding: EdgeInsets.zero,
    tilePadding: EdgeInsets.zero,
    dense: true,
    visualDensity: VisualDensity.compact ,//OR VisualDensity(vertical: -4) you change the number
    ...
)
    Login or Signup to reply.
  2. 0 
     visualDensity: VisualDensity(horizontal:-4,vertical:-4)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search