Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remove or Set Padding in ListTile

I'm completely new to Flutter / Dart so pls excuse if this is a noob question. I'm trying to remove the space on top and bottom of the Text of a ListTile element from the "first app" example code. So basically the two areas with the red pointers.

The code looks like

  return ListTile(
    //dense: true,
    //minVerticalPadding: 1.0,
    //contentPadding: EdgeInsets.symmetric(vertical: 1),
    tileColor: Colors.blue,
    title: Text(
      pair.asPascalCase,
      style: _biggerFont,
    ),
  );

As u can see, I tried dense, minVerticalPadding and contentPadding, but none of them did the job.

Thanks a lot for pointing me in the right direction!

like image 535
dccl Avatar asked Aug 31 '26 03:08

dccl


2 Answers

You can use VisualDensity property to set minimum padding around Your ListTile. that value can't lower than -4 and upper than +4:

ListTile(
      contentPadding: EdgeInsets.zero,
      dense: true,
      visualDensity: VisualDensity(horizontal: -4, vertical: -4),
      title: Text("hello"),
    )

and if you want to keep your horizontal padding you can use this code:

ListTile(
      contentPadding: EdgeInsets.symmetric(vertical: 0, horizontal: 10),
      dense: true,
      visualDensity: VisualDensity(horizontal: 0, vertical: -4),
      title: Text("hello"),
    )
like image 99
Ali Mohammadzadeh Avatar answered Sep 03 '26 06:09

Ali Mohammadzadeh


Try it

ListTile(
    visualDensity: VisualDensity(horizontal: 0, vertical: -4),
    contentPadding: EdgeInsets.all(0),
    tileColor: Colors.blue,
    title: Text(
       "hello"
    ),
),
like image 37
Shanto Avatar answered Sep 03 '26 05:09

Shanto



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!