Flutter ListTile Padding

ListTile is a commonly used widget in Flutter to display information in a list. However, sometimes we might want to adjust the padding of a ListTile to achieve a better layout. In this tutorial, we'll take a look at how to do that.

Adding Padding to a ListTile

To add padding to a ListTile, we can wrap it with a Padding widget and set the padding property to the desired value. Here's an example:

Padding(
  padding: EdgeInsets.symmetric(vertical: 8.0),
  child: ListTile(
    title: Text('Title'),
    subtitle: Text('Subtitle'),
    leading: Icon(Icons.star),
    trailing: Icon(Icons.arrow_forward),
    onTap: () => print('Tapped'),
  ),
)

In this example, we set the vertical padding to 8.0 using the EdgeInsets.symmetric method. You can also set the padding using the EdgeInsets.all or EdgeInsets.only methods.

Adjusting Padding of ListTile Elements

Sometimes we might want to adjust the padding of specific elements in a ListTile. For example, we might want to add more padding to the title or the subtitle. To do this, we can use the contentPadding property of the ListTile widget. Here's an example:

ListTile(
  title: Padding(
    padding: EdgeInsets.only(top: 16.0),
    child: Text('Title'),
  ),
  subtitle: Padding(
    padding: EdgeInsets.only(bottom: 16.0),
    child: Text('Subtitle'),
  ),
  leading: Icon(Icons.star),
  trailing: Icon(Icons.arrow_forward),
  onTap: () => print('Tapped'),
  contentPadding: EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
)

In this example, we add 16.0 pixels of padding to the top of the title and the bottom of the subtitle. We also set the contentPadding to 8.0 pixels vertically and 16.0 pixels horizontally.

Conclusion

Adding padding to a ListTile is a simple way to adjust the layout of your app. By using the Padding and contentPadding properties, you can customize the padding for the entire ListTile or specific elements within it.