Remove padding from ListTile between leading and title

Question

I need to remove some padding between leading Widget and title Widget in a ListTile. It has too much blank spaces. Is there a way to do that? The code that I am using for that is this:

ListTile _getActionMenu(String text, IconData icon, Function() onTap) {
  return new ListTile(
    leading: new Icon(icon),
    title: new Text(text),
    onTap: onTap,
  );
}

Answer 1

You can use the minLeadingWidth on your ListTile. The default value is 40, so you can use a lower value to make your leading and title come closer.

ListTile(
  leading : Icon(Icons.settings),
  title : Text("Settings"),
  minLeadingWidth : 10,
);

Answer 2

EDIT: After Flutter 2.0 upgrade

As Dinesh has pointed out here, 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 3

You can use Align and specify the Alignment.

ListTile _getActionMenu(String text, IconData icon, Function() onTap) {
  return new ListTile(
    leading: new Icon(icon),
    title: Align(
      child: new Text(text),
      alignment: Alignment(-1.2, 0),
    ),
    onTap: onTap,
  );
}

Answer 4

For those who are looking for a clean, one line answer now. You can use

ListTile(
 horizontalTitleGap: desiredDoubleValue,
);

Answer 5

this code is the solution

...
    contentPadding:EdgeInsets.all(0),
...

Answer 6

An ugly workaround I've found for this is to put a Row widget in the title section and then put the icon and the text inside that Row with a SizedBox in the middle. This way you can control how much space you want between them:

ListView(
  shrinkWrap: true,
  children: <Widget>[
    ListTile(
      title: Row(
        children: <Widget>[
          Icon(Icons.android),
          SizedBox(
            width: 5, // here put the desired space between the icon and the text
          ),
          Text("Title") // here we could use a column widget if we want to add a subtitle
        ],
      ),
    )
  ],
)

Answer 7

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,
    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) under BSD License, I'm hard to understand why one user down-voted the answer without submitting any problems on it.

Answer 8

set horizontalTitleGap to 0

 ListTile(
                          contentPadding: EdgeInsets.zero,
                          minLeadingWidth: 5,
                          ***horizontalTitleGap: 0,***
                          leading: widget,
                          title: widget ,
                         )

Answer 9

Use horizontalTileGap:

ListTile(
        horizontalTitleGap: 0,
        leading: CircleAvatar(
          radius: 50,
          backgroundImage:
              NetworkImage("https://picsum.photos/250?image=1"),
        ),
        title: Text("Image 6"),
      ),

Answer 10

Instead, you can create your own Widget as below:

1. Let's say we'll create a widget file called text_icon.dart

    import 'package:flutter/material.dart';

      class TextIcon extends StatelessWidget {
        final String title;
        final IconData icon;
        final String button;

        const TextIcon({Key key, this.title, this.icon, this.button}) : super(key: key);

        @override
        Widget build(BuildContext context) {
          final theme = Theme.of(context);

          return Padding(
            padding: const EdgeInsets.only(bottom: 24.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Icon(
                 icon,
                 size: 18,
                ),
               SizedBox(width: 5),
               Text(
                 title,
                 style: theme.textTheme.subhead.copyWith(fontSize: 13),
               ),
             ],
           ),
         );
       }
     }

2. Call your widget in your screen

   TextIcon(icon: Icons.pause_circle_filled, title: "John Doe")
   

Answer 11

Now ListTile has the property of minLeadingWidth.

Example

ListTile(
      minLeadingWidth: 15,
      leading: Icons(Icons.search),
      title: Text("Data");

Answer 12

It can be solved by simply adding: contentPadding: EdgeInsets.zero,

Answer 13

You must to add this parameter.

return ListTile(
    leading: new Icon(icon),
    title: new Text(text),
    onTap: onTap,
    //Add this parameter
    contentPadding: EdgeInsets.zero,
);

Answer 14

I think a ListTile is not the correct widget a more elegant approach would be:

FlatButton.icon(
    onPressed: null,
    icon: Icon(
      Icons.flag_rounded,
      color: Colors.white,
    ),
    label: Text('Title'))

Answer 15

This code is enough to adjust the gap between the title and leading

horizontalTitleGap: 1

Answer 16

This one works for me. Keep the minLeadingWidth as 0, and adjust the horizontalTitleGap to acheive the desired output.

return ListTile(
    leading: new Icon(icon),
    title: new Text(text),
    horizontalTitleGap: 8,
    minLeadingWidth: 0,
);

Answer 17

ListTile(
        contentPadding: EdgeInsets.zero,  // Remove padding before leading icon
        horizontalTitleGap: -14.0,  // Reduce padding between title and leading icon 
      ),

Answer 18

horizontalTitleGap: value, minLeadingWidth: value, use the two together. Works pefectly. the values have to be the same.