How to Remove space at top and bottom ListTile flutter?

Question

How to remove the space top and bottom from ListTile?

My Code is:

 child: Column(
    children: <Widget>[
      ListTile(
        contentPadding: EdgeInsets.only(left: 0.0, right: 0.0),
        title: Text(
          'Home',
          style: TextStyle(fontSize: 15.0),
        ),
      ),
      ListTile(
        contentPadding: EdgeInsets.only(left: 0.0, right: 0.0),
        title: Text(
          'Audio',
          style:
              TextStyle(fontSize: 15.0, color: Colors.black45),
        ),
      ),),

Screenshot:

Screenshot

reverie_ss · Answer 1 · 2021-05-21T11:46:24.087

77

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: 0, vertical: -4),
    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 top/bottom spacing. But the other question is about gap between leading and title

edited May 21 '21 at 11:46

answered Aug 20 '20 at 12:06

reverie_ss

2,396
23
30

3

I'm not able to find this "visualDensity" in my ListTile widget properties!!! – Alex Roy Aug 28 '20 at 06:57
1

solved 50% space, still have 6-8 pixels gap between top of Listtile and content. – Kamlesh Feb 28 '21 at 09:30
@Kamlesh you can create a custom list tile , if you need more flexibility – reverie_ss Mar 02 '21 at 11:44
visualDensity can reduce height between ListTiles – Rudy Rudy Jun 05 '21 at 08:30
1

minVerticalPadding worked perfectly for me. – Abbas Sabeti Aug 19 '21 at 13:09

Brinda Rathod · Answer 2 · 2020-10-12T06:53:07.843

46

In your code put property dense: true inside the list tile

       ListTile(
                dense:true,
                contentPadding: EdgeInsets.only(left: 0.0, right: 0.0),
                title: Text(
                  'Home',
                  style: TextStyle(fontSize: 15.0),
                ),
              ),

Hope it helps!

edited Oct 12 '20 at 06:53

answered Sep 17 '19 at 04:40

Brinda Rathod

2,693
1
20
32

7

It only removes horizontal padding, not vertical ones. – Alireza Akbari Jul 31 '20 at 04:16
"dense: true" alone did decrement the vertical spacing. but content padding didn't work for vertical spacing issue – Karan Alangat Sep 09 '20 at 12:01
Adding fontSize along with other settings did help to reduce the top padding – Stan Nov 27 '22 at 11:08

score 15 · Answer 3 · answered Feb 28 '21 at 10:53

ListTile(
    dense: true,
    contentPadding: EdgeInsets.symmetric(horizontal: 0.0, vertical: 0.0),
    visualDensity: VisualDensity(horizontal: 0, vertical: -4),
);

Above solution worked for me. I hope, this will also help you. Thanks for asking this question.

score 10 · Answer 4 · answered Dec 17 '20 at 14:05

10

That worked for me in ListTile:

visualDensity: VisualDensity(horizontal: 0, vertical: -4)

answered Dec 17 '20 at 14:05

guenter47

457
5
13

score 9 · Accepted Answer · edited Oct 15 '20 at 06:46

9

With ListTile it is not possible. Some modifications are possible with the help of ListTileTheme like color and there is also the option of modifying padding but only work for left and right padding. So better is to create your own custom tile as @santosh showed in his answer. You can also use SizedBox but it can result in tragic output.

edited Oct 15 '20 at 06:46

Yashwardhan Pauranik

5,370
5
42
65

answered Mar 21 '19 at 12:16

Chetan Pawar

404
3
4

1

Yes, it is possible using `visualDensity`. Check : https://stackoverflow.com/a/63504719/6747251 – reverie_ss Aug 25 '20 at 13:45

score 5 · Answer 6 · answered Mar 20 '19 at 16:20

Try this

              child: Column(
                children: <Widget>[
                    Text(
                      'Home',
                      style: TextStyle(fontSize: 15.0),
                    ),
                    Text(
                      'Audio',
                      style:
                          TextStyle(fontSize: 15.0, color: Colors.black45),
                    ),
                 ),)

Mohammad Aboul-Ela · Answer 7 · 2022-06-01T01:29:22.740

3

this is worked for me

ListTile(
  dense:true,
  minVerticalPadding: 0,
  contentPadding: EdgeInsets.zero,
  visualDensity: VisualDensity(horizontal: 0, vertical: 4),
        );

now I have no padding at all

edited Jun 01 '22 at 01:29

answered Jun 01 '22 at 01:13

Mohammad Aboul-Ela

71
4

score 1 · Answer 8 · answered Mar 19 '21 at 10:39

1

Let's try with shorter way:

ListTile(
          contentPadding: EdgeInsets.zero,
          dense: true,
          title: Text('label'),
        );

answered Mar 19 '21 at 10:39

DungPhan

356
3
5

`contentPadding` helped me to remove left right space – Mrinmoy Jun 24 '21 at 14:51

score 0 · Answer 9 · answered Jan 19 '20 at 02:45

For me Padding widget worked in place of ListTile.padding variable can be updated as per your requirements for a ListItem.

Padding(
        padding: const EdgeInsets.only(left : 8.0 , right 8.0),
        child: Text("List Item Text",
            style: Theme.of(context).textTheme.body1))

score 0 · Answer 10 · edited Mar 05 '23 at 19:21

0

ListTile(
  dense: true,
  visualDensity: VisualDensity(horizontal: 0, vertical: -4),
  contentPadding: EdgeInsets.only(left: 0.0,right: 0.0, top: 0.0),
  title:  LabelText(
    labelText: "Cara",
    fontSize: 14,
    fontWeight: FontWeight.w600,
    color: AppColor.txtColor,
    textAlign: TextAlign.center
  ),
  subtitle:  LabelText(
    labelText: "Patient #1",
    fontSize: 12,
    fontWeight: FontWeight.normal,
    color: AppColor.inactive,
    textAlign: TextAlign.center
  ),
),

edited Mar 05 '23 at 19:21

Tyler2P

2,324
26
22
31

answered Feb 28 '23 at 08:27

user21103955

1
3

1

Your answer could be improved by adding more information on what the code does and how it helps the OP. – Tyler2P Mar 05 '23 at 19:20

score 0 · Answer 11 · answered Mar 27 '23 at 12:38

ListTile(
  minVerticalPadding: 0, // else 2px still present
  dense: true, // else 2px still present
  visualDensity: VisualDensity.compact, // Else theme will be use
  contentPadding: const EdgeInsets.zero, // Or what do you want, you will have now the exact amount of padding as expected
),

score -1 · Answer 12 · answered Nov 10 '21 at 10:52

-1

None of the solutions above will work (for now). Your best bet is to use a TextButton and include a Row as the child

answered Nov 10 '21 at 10:52

Lightwaxx

625
1
8
18

How to Remove space at top and bottom ListTile flutter?

12 Answers12

Linked