如何删除 ListTile 颤振顶部和底部的空间？

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:

Answer 1

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: 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.

PS 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

Answer 2

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!

Answer 3

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.

Answer 4

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.

Answer 5

这在 ListTile 中对我有用：

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

Answer 6

Try this

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

Answer 7

Implementation this one dense:true , in your ListTile Properties, The dense parameter makes the text smaller and packs everything together.

You can change how much the content is inset on the left and right (but not the top or bottom) by setting the contentPadding . The default is 16.0 but here we will set to 0.0 :

 ListTile(
   contentPadding: EdgeInsets.symmetric(vertical: 0.0, horizontal: 
    0.0),
   dense:true,
   title: Text("Your title"),
   subtitle: Text("subtitle",
    style: TextStyle(fontSize: 14.0),),
 );

Answer 8

Let's try with shorter way:

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

Answer 9

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

Answer 10

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

Answer 11

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