CODEWITHSUNDEEP
flutterdartflutter-widget
gopinath
gopinath

Reputation: 99

How to remove top and bottom default padding of Expansion tile for leading widget flutter

enter image description here

  1. need to remove padding to the list item of expansion tile widget please find the image for actual result . Expected result should remove the top bottom space

here is the code can anyone help me:

Theme(
      data: theme,
      child: ListTileTheme(
        contentPadding: EdgeInsets.all(0),
        dense: true,
        child: ExpansionTile(
          title: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              GFCheckbox(
                inactiveBgColor: kColorPrimaryDark,
                inactiveBorderColor: Colors.white,
                customBgColor: kColorPrimaryDark,
                size: 15,
                activeIcon: const Icon(
                  Icons.check,
                  size: 15,
                  color: Colors.white,
                ),
                activeBgColor: kColorPrimaryDark,
                onChanged: (value) {
                  setState(() {
                    isChecked = value;
                  });
                },
                value: isChecked,
                inactiveIcon: null,
              ),
              SizedBox(
                width: 5,
              ),
              textWidget(color: Colors.white, size: 12, text: root.title),
            ],
          ),
          key: PageStorageKey<DataList>(root),
          children: root.children.map(_buildTiles).toList(),
        ),
      ),
    );

Upvotes: 6

Views: 5997

Answers (5)

Jac&#243; Gonzaga
Jac&#243; Gonzaga

Reputation: 1

Wrap your ExpansionTile with ListTileTheme(minVerticalPadding: 0.0)

i.e.

ListTileTheme(
            contentPadding: EdgeInsets.zero // this also removes horizontal padding
            minVerticalPadding: 0.0,
            child: ExpansionTile(
              dense: true,
              title: YourCardTileTitle(),
              // ...
            ),
          ),

Upvotes: 0

TijnvdEijnde
TijnvdEijnde

Reputation: 301

This will do the trick if you wrap the ExpensionTile widgets with the ExpansionPanelList widget.

To remove the top padding you can use the expandedHeaderPadding property and for the bottom padding you can use the materialGapSize property like so:

ExpansionPanelList(
  materialGapSize: 0,
  expandedHeaderPadding: EdgeInsets.zero,
)

Upvotes: 0

Niyati Tanna
Niyati Tanna

Reputation: 19

To remove top and bottom padding for expanded tile use property expandedHeaderPadding of ExpansionPanelList.

ExpansionPanelList(
    expandedHeaderPadding: const EdgeInsets.symmetric(vertical: 0),
    ...
)

Upvotes: 1

Manishyadav
Manishyadav

Reputation: 1746

Try this,

ListTileTheme(
   contentPadding: EdgeInsets.all(0),
   dense: true,
   horizontalTitleGap: 0.0,
   minLeadingWidth: 0,
   child: ExpansionTile(...)
)

Upvotes: 1

Ravindra S. Patil
Ravindra S. Patil

Reputation: 14885

Try below code add childrenPadding and tilePadding

  ExpansionTile(
      childrenPadding: EdgeInsets.zero,
      tilePadding: EdgeInsets.zero,
   ),

Try to use MediaQuery.removePadding

MediaQuery.removePadding(
      removeTop: true,
      removeBottom: true,
      // removeLeft: true,
      // removeRight: true,
      context: context,
      child: ExpansionTile(
        childrenPadding: EdgeInsets.zero,
        tilePadding: EdgeInsets.zero,
      ),
    ),

Upvotes: 1

Related Questions