How to reduce the margin between 'leading' and 'title' for ListTile ? Flutter

Question

The margin between leading and title is too much;

How to decrease it; I have tried several ways:

warp the leading with container and set margin right negative;
warp the title and set padding-left

however, it does not work at all; is there any solution, i do need help

If you have used Divider the set height to 0, see example https://stackoverflow.com/a/63278039/11827756 — Kalpesh Dabhi, Aug 06 '20 at 06:35
You can try using a FlatButton https://stackoverflow.com/a/64515086/1354367 — Hlulani, Oct 24 '20 at 15:39
With the release of Flutter 2.0.0, it would appear [@CopsOnRoad's answer](https://stackoverflow.com/a/65850534/638153) would be worthy consideration for this question. — Keith DC, Mar 04 '21 at 10:19

score 19 · Accepted Answer · answered Nov 26 '18 at 04:14

you're ultimately better off building your own containers - there's nothing special or complicated about ListTile. that way you can easily customize things like the spacing between a title and a button. just use something like so:

  Container(
    padding: new EdgeInsets.symmetric(vertical: 6.0, horizontal: 6.0),
    margin: EdgeInsets.symmetric(vertical: 6.0),

    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(6.0),
      border: Border.all(color: Colors.black),
    ),

    child: Column(
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[

                  IconButton(
                    icon: Icon(myLeadingIcon),
                    onPressed: () => {},
                  ),
                  Padding(padding: EdgeInsets.only(left: 20.0)),
                  Text(_myTitle),
                ],
              ),
    ...

thanks. it seems the only approach to achieve that; i will give a try. — zhouwangsheng, Nov 27 '18 at 01:55

score 16 · Answer 2 · answered May 12 '20 at 19:33

The only answer that worked for me is to Matrix transform the title widget.

Here, the title text padding is decreased by 16.

ListTile(
  leading: Icon(icon),
  title: Transform(
              transform: Matrix4.translationValues(-16, 0.0, 0.0),
              child: Text("Title text",
                          style: TextStyle(fontSize: 18, color: textPrimary)),
              ),
);

Source: How to set the padding between leading and title from Flutter ListTile?

This works!! Thanks for saving my time friend. – sanyam jain May 04 '21 at 18:50 — sanyam jain, May 04 '21 at 18:50

reverie_ss · Answer 3 · 2021-05-21T11:47:11.683

UPDATE

Now you can also use the following propertier:

horizontalTitleGap - Between title and leading
minVerticalPadding - Between title and subtitle
minLeadingWidth - Minimum width of leading
contentPadding - Internal padding

OLD

You can use the visualDensity property to reduce the space.

ListTile(
    visualDensity: VisualDensity(horizontal: -4, vertical: 0),
    title: Text("xyz")
);

The visualDensity value can be changed from -4.0 to 4.0. Lower the value, more compact the view.

P.S. This solution is similar to a different question

This question is about the gap between leading and title. But the other question is about top/bottom spacing

score 7 · Answer 4 · answered Dec 08 '19 at 15:08

7

Don't use leading just use Row inside title

title: Row(
    children: <Widget>[
       Icon(Icons.location_on,size: 15,color:ThemeManager.mainContentColor,),
       SizedBox(width: 8,),
       Text('DEMO'),
    ],
),

answered Dec 08 '19 at 15:08

Ahmed Mahgoub

91
1
2

1

in this case, why would one bother using ListTile at all? But the idea is right, ListTile is just a small layout made of column and rows with built-in paddings – Kirill Karmazin Feb 14 '20 at 11:23

score 6 · Answer 5 · answered Nov 21 '19 at 11:15

6

Inside ListTile, Use contentPadding : EdgeInsets.fromLTRB() you can then tweak the R value to suit your design.

An example with a Container:

Container(
        child: ListTile(
          contentPadding: EdgeInsets.fromLTRB(10.0, 0.0, 250.0, 0.0),
          leading: CircleAvatar(
            backgroundColor: Colors.purpleAccent,
            child: Text('A'),
          ),
          trailing: Text(
            'Any Text here',
            style: const TextStyle(
              fontWeight: FontWeight.w600,
              fontSize: 16.0,
            ),
          ),
        ),
      ),

answered Nov 21 '19 at 11:15

Theo

69
1
1

5

This does not affect the spacing between the `leading` and `trailing` widgets. – Luke Pighetti Feb 07 '20 at 18:05
1

Seriously, why isn't this the best solution? I was searching on how to remove the edges padding of the ListTile to make it aligned with the other content below it, I was about to give up and make my own customized widget and then this is the only solution that worked for me! `contentPadding: EdgeInsets.fromLTRB(8.0, 0.0, 0.0, 8.0)`. Thanks a LOT!! – Mahmoud Eidarous Mar 13 '20 at 17:08
@MahmoudEidarous this isn't the best solution because, although it may have helped you, it doesn't answer the question. – Nihar Karve Jul 26 '20 at 11:05
Question is related to reduce gap between leading and title in listtile while you are suggesting contentpadding which only applied on listtile as padding from left, top, right and bottom. Thanks. – Kamlesh Jun 13 '21 at 04:57

score 6 · Answer 6 · answered Jan 22 '21 at 18:11

6

Set minLeadingWidth to 0.

ListTile(
  minLeadingWidth: 0, // <-- Set this. 
  leading: Icon(Icons.settings),
  title: Text('Settings'),
)

answered Jan 22 '21 at 18:11

CopsOnRoad

237,138
77
654
440

This seems to work, but I can't find it documented anywhere. I was really hoping that there would also be a `minTrailingWidth`, but it doesn't seem like it. – BananaNeil Feb 28 '21 at 11:05
@BananaNeil 'minLeadingWidth' appears to have just been added as part of Flutter `2.0.0`, which looks like it just [released on 3/3/21](https://flutter.dev/docs/development/tools/sdk/releases). I'm on the Stable channel and `minLeadingWidth` was available as a property today, whereas it wasn't yesterday. No idea about documentation, but here was the [commit on GitHub](https://github.com/flutter/flutter/commit/8cb266511897d79e6d7d60c08c0e425f4cdaf433#diff-c4ef7c798c820ecda6cab38be1c2d619d5349dc478889f3a54ebbe07f60c11f2). – Keith DC Mar 04 '21 at 10:17

score 5 · Answer 7 · answered Jun 14 '20 at 16:27

I think it's quite late to reply to this, but I think this can help others. I faced similar kind of problem. The below code helped me to solve this:

Card(
  child: ListTile(
    leading: Icon(
      Icons.call,
      color: Colors.teal,
      size: 20
    ),
    title: Align(
      child: Text(
          "xxxxxxxxxx"
      ),
      alignment: Alignment(-1.3, 0),
    ),
    dense: true,
  )

So, basically combination of Alignment property to title and dense: true eventually helped me to solve this.

Note: Use alignment value according to your use case.

I hope this will help you!

this breaks the text alignment with other items in the list... — Swapnil Kadam, Aug 05 '20 at 12:44

Ayush Sth · Answer 8 · 2021-07-06T11:26:41.280

3

You can set horizontalTileGap

ListTile( horizontalTitleGap: 0, //Set this. minLeadingWidth: 0, leading: Icon(Icons.settings), title: Text('Settings'),)

edited Jul 06 '21 at 11:26

answered May 28 '21 at 05:27

Ayush Sth

317
6
11

Playhi · Answer 9 · 2020-03-03T12:25:43.357

I have the same problem these days, and finally I published one package which may can solve this problem.

The package is available at https://pub.dev/packages/list_tile_more_customizable, and with this package we can set the horizontalTitleGap, and when it has been set to 0.0(zero), the padding between leading and title will become zero.

Usage:

ListTileMoreCustomizable(
    title: Text("Title"),
    trailing: Icon(Icons.people),
    horizontalTitleGap: 0.0, // This horizontalTitleGap can set the margin between 'leading' and 'title' and also between 'trailing' and 'title'.
    onTap: (details){},
    onLongPress: (details){},
);

Edited:
This method works great for me, and also the code is available at https://github.com/Playhi/list_tile_more_customizable (the raw code is too long), I'm hard to understand why one user down-voted the answer without submitting any problems on it.

score 2 · Answer 10 · answered Jun 20 '21 at 11:26

Set minLeadingWidth: 0 to remove the gap between leading and title and set horizontalTitleGap: 7 to adjust your custom gap between leading and title.

ListTile(
  minLeadingWidth: 0, // min width of leading; if 0 => leading won't take extra space 
  horizontalTitleGap: 7,  //gap between title and leading
  leading: SvgPicture.asset(icChecked),
  title: const Text('Demo Text', style: tsWhiteSemiBold16),
),

If you wants your leading in CenterVertical , so you have to wrap the leading icon inside a Container

ListTile(
  minLeadingWidth: 0, // min width of leading; if 0 => leading won't take extra space 
  horizontalTitleGap: 7,  //gap between title and leading
  leading: Container(
    height: double.infinity,
    child: SvgPicture.asset(icChecked),
  ),
  title: const Text('Demo Text', style: tsWhiteSemiBold16),
),

You can also user contentPadding to adjust the padding of the ListTile children.

score 1 · Answer 11 · answered Aug 31 '19 at 11:16

1

setting dense true may fix your problem. ListTile( dense: true )

answered Aug 31 '19 at 11:16

Rajilesh Panoli

770
10
17

Then the best solution is customise widget using rows. – Rajilesh Panoli Sep 06 '19 at 11:28
6

This `does not` decrease the margin between `leading` and `title`!!! – BambinoUA May 18 '20 at 09:44

score 0 · Answer 12 · answered Aug 06 '20 at 06:34

0

If have use Divider for line in ListTile or ListView.separated then set Divider height 0, because Divider take by default some height.

Divider(
              height: 0,
        );

This is working properly for me.

answered Aug 06 '20 at 06:34

Kalpesh Dabhi

760
8
18

score 0 · Answer 13 · answered May 20 '21 at 09:14

After Flutter 2.0 upgrade

ListTile has received a minLeadingWidth property. Default value is 40, so to reduce space between leading and title by x pass minLeadingWidth: 40 - x.

Align results will depend on text and tile width.

Use Transform.translate for consistent results.

ListTile(
  leading: Icon(icon),
  title: Transform.translate(
    offset: Offset(-16, 0),
    child: Text('Some text'),
  ),
);

score 0 · Answer 14 · answered Jun 09 '21 at 04:49

0

As of June 9 of 2021, you can implement that like this, using horizontalTitleGap:

ListTile(
      horizontalTitleGap: 2,
      title: Text("Title Number ${index + 1}")
)

answered Jun 09 '21 at 04:49

Navid All Gharaee

89
1
9

How to reduce the margin between 'leading' and 'title' for ListTile ? Flutter

14 Answers14

Linked