Home » Android » android – Remove space top and bottom ListTile flutter

android – Remove space top and bottom ListTile flutter

Posted by: admin June 15, 2020 Leave a comment

Questions:

I need help, please.
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

Thanks!. Sorry for my bad English

How to&Answers:

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

Answer:

In your code put property dense= true in side 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:

Try this

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

Answer:

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:

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