66

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,
  );
}
2

16 Answers 16

70

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,
);
4
  • 5
    Wow, I'm so glad I scrolled to the bottom of this page to find this answer!
    – BananaNeil
    Feb 24, 2021 at 12:52
  • 1
    This will be awesome when it's in the Stable channel. As of 2021-03-02 it's in Dev channel. The edited file's GitHub branch tag is 1.27.0-8.0.pre (Stable is currently at 1.22.6).
    – Keith DC
    Mar 3, 2021 at 8:01
  • 2
    It's one day later and flutter upgrade just upgraded to 2.0.0. If I'm reading it right, it would appear this included all Dev (and Beta) channel changes (Dev now has a newer 2.1.0-10.0.pre build). I'm still on the Stable channel and this option minLeadingWidth is now available.
    – Keith DC
    Mar 4, 2021 at 1:46
  • for some reason it doesn't work inside a popup menu, The increment is reflected but not the decrement
    – xrayian
    Dec 20, 2021 at 8:30
65

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'),
  ),
);
3
  • 1
    The @westdabestdb answer worked for me, but only for title. For subtitle only this one worked. Jan 4, 2021 at 9:24
  • 1
    Works perfectly! Mar 8, 2021 at 18:45
  • 1
    minLeadingWidth is a better approach Apr 15, 2021 at 13:14
46

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,
  );
}
4
  • 11
    titles became assymetric
    – temirbek
    Apr 2, 2019 at 3:34
  • 1
    Your solution works but not if I put the Text in a container. I put it in a container because I want to set a background color, but then the Align stops doing anything. Does anyone know a workaround please?
    – Texv
    May 5, 2020 at 14:33
  • If the implementation of list tile changes this will cause issues. (e.g the default padding changes in list tile) A better approach is to not use leading and add the required leading widget as part of the title using a row widget. Shown in other answers here. Nov 2, 2020 at 12:52
  • 1
    Answer below by Rustem Kakimov is best alternate option to this.
    – Geek
    Nov 25, 2020 at 14:05
29

this code is the solution

...
    contentPadding:EdgeInsets.all(0),
...
2
  • this reduced the left margin from leading widget only
    – Piyush
    Jun 3, 2021 at 9:13
  • 1
    Thanks! Works for me Nov 24, 2021 at 22:23
26

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

ListTile(
 horizontalTitleGap: desiredDoubleValue,
);
1
  • 3
    Why this answer isn't more up-voted ? Works like a charm along with minLeadingWidth.
    – gruvw
    Jun 30, 2022 at 16:43
16

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

enter image description here

3
  • 7
    This is not that ugly, less than the accepted answer IMO. At least you can exactly control the padding and it is not dependant on the device aspect ratio.
    – ncuillery
    Aug 7, 2020 at 20:24
  • I'm a novice, but I agree with @ncuillery - this is a fine solution. Thanks! Nov 23, 2020 at 20:39
  • I'm not 100% sure but I believe there's gonna be a phantom padding between the null leading and the title of the tile still.
    – Csaba Toth
    Dec 18, 2020 at 22:32
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.

2
  • 3
    If you rename your package to BetterListTile probably you get upvote :P
    – devnomic
    Mar 11, 2020 at 9:43
  • 2
    It seems as if these modifications are already merged into Flutter master channel: github.com/flutter/flutter/pull/64222
    – RobDil
    Feb 3, 2021 at 13:13
6

set horizontalTitleGap to 0

 ListTile(
                          contentPadding: EdgeInsets.zero,
                          minLeadingWidth: 5,
                          ***horizontalTitleGap: 0,***
                          leading: widget,
                          title: widget ,
                         )
1
  • As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Community Bot
    Mar 11, 2022 at 6:20
5

Use horizontalTileGap:

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

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),
               ),
             ],
           ),
         );
       }
     }
  1. Call your widget in your screen

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

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

2

Now ListTile has the property of minLeadingWidth.

Example

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

Use horizontalTitleGap or minLeadingWidth. Both has default values set in 16.0 and 40.0 respectively.

horizontalTitleGap

enter image description here

minLeadingWidth

enter image description here

ListTile(horizontalTitleGap: 0, minLeadingWidth: 0,),
1

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'))
1

You must to add this parameter.

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

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

horizontalTitleGap: 1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.