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:

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

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

Answer 1

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),
                ],
              ),
    ...

Answer 2

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?

Answer 3

UPDATE

Now you can also use the following propertier:

1. horizontalTitleGap - Between title and leading
2. minVerticalPadding - Between title and subtitle
3. minLeadingWidth - Minimum width of leading
4. 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.

PS 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

Answer 4

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'),
    ],
),

Answer 5

Set minLeadingWidth to 0 .

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

Answer 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,
            ),
          ),
        ),
      ),

Answer 7

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!

Answer 8

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.

Answer 9

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

Answer 10

您可以设置horizo​​ntalTileGap

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

Answer 11

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.

Answer 12

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'),
  ),
);

Answer 13

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

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

Answer 14

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.