How to Remove Top and Bottom Space From ListTile In Flutter??

3 min read
How to Remove Top and Bottom Space From ListTile In Flutter
How to Remove Top and Bottom Space From ListTile In Flutter

ListTile Widget contains one to three lines of text optionally flanked by icons or other widgets, such as checkboxes. The icons for the tile are defined with the leading and trailing parameters. So today, in this article, we will go through how to remove Top and Bottom Space from ListTile in flutter.

How to Remove Top and Bottom Space From ListTile In Flutter??

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.

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

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

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

So you can change how much the content is inset on the left and right but not the top or bottom by setting the contentPadding.

So now, the default is 16.0 but here we will set it 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),),
);

Conclusion:

Thanks for being with us on a Flutter Journey !!! we hope you learned the best of it 馃檪

So in this article, we have been through how to remove the top and bottom space from ListTile in flutter.

Keep Learning !!! Keep Fluttering !!!

Don’t forget to drop your positive feedback to keep the enthusiasm going and also subscribe to our newsletter to get the latest updates!

FlutterAgency.com聽is our portal Platform dedicated to Flutter Technology and聽Flutter Developers. The portal is full of cool resources from Flutter like聽Flutter Widget聽Guide,聽Flutter Projects,聽Code libs聽and etc.

FlutterAgency.com is one of the most popular online portals dedicated to聽Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of聽Flutter.

1 comment

Leave a Reply