How to remove the content padding that the list tile comes with by default?

Question

I was working with a drawer which had a list of tiles. Each individual tile has an image and a text following it. So I put the above mentioned widgets in a row. To my surprise, I found that there is some unexplained padding between the text and the title. I am attaching a screenshot of a tile for better understanding :

tile example

Any suggestion is welcome!. Thank you!.

I have added rowChildren which is a list of widgets because my list tile title may contain text and some image :

child = new Container(
  child: new Column(
    children: <Widget>[
      new ListTile(
        dense: true,
        leading: new Image.asset(
                leading,
                color: Colors.white,
              )
        title: new Row(
          children: rowChildren,
        ),
      )
    ],
  ),
);

and this is the flutter inspector screenshot corresponding to the image I shared :

flutter inspector

I added debugPaintSizeEnabled=true and got this :

tile with debug paint

There is a [contentPadding](https://docs.flutter.io/flutter/material/ListTile-class.html) class in ListTile. It is not very clear what padding you mean on your screenshot. Please provide one that shows exactly what you mean. — Bostrot, Jul 13 '18 at 08:59
@Bostrot Sorry for the inconvenience,The padding I was asking about is the padding between the image and the text. — jinugeorge, Jul 13 '18 at 09:00
Based on the code and the sample, the padding is much higher than I would expect. I suspect that something about that image is causing the issue. Add `debugPaintSizeEnabled=true;` in your applications main() function and restart your app in IntelliJ or Android Studio. It will enable debug paint mode which makes padding clearer. — Cliff Brown, Jul 13 '18 at 09:16
Cliff, I added and I have added a screenshot.Please advice if I missed anything — jinugeorge, Jul 13 '18 at 09:34
I have given 0 padding for the image.I double checked.From flutter Inspector,I could see that the AnimatedDefaultTextStyle itself starts at that distance from the image.I am not sure why. — jinugeorge, Jul 13 '18 at 09:36

score 3 · Answer 1 · answered Apr 17 '20 at 13:59

how about using contentPadding

ListTile(
             contentPadding:EdgeInsets.all(0),
             dense: true,
             leading: new Image.asset(
              leading,
              color: Colors.white,
             ),
             title: new Row(
              children: rowChildren,
             ),
            ),

score 0 · Accepted Answer · answered Jul 13 '18 at 10:11

I fixed it!!!.The solution is, Instead of giving the leading image in leading attribute, add it in the same rowChildren. The gap disappears!

List<Widget> rowChildren = [];

rowChildren.add(
    PaddingUtils.embedInPadding(
        new Image.asset(
          $imagePath,
        ),
        new EdgeInsets.only(right: 8.0)),
  );

How to remove the content padding that the list tile comes with by default?

2 Answers2