ListTile in Flutter

When it comes to presenting a list of items, Flutter developers can use the ListTile widget available in the Flutter framework.

What is ListTile?

ListTile is a widget in Flutter used to show a list of items. It is used to create a list item in the form of a row that can consist of an icon, leading or trailing image, title, and subtitle. Developers can use this widget to display a list of items such as Settings, Contacts, or Playlist, etc.

How to Use ListTile?

To use ListTile in your Flutter application, follow the steps below.

• Import the material.dart library in your file.

import 'package:flutter/material.dart';

• Create a ListTile widget in your build() method.

ListTile(
  leading: Icon(Icons.person),
  title: Text('John Doe'),
  subtitle: Text('johndoe@example.com'),
  trailing: Icon(Icons.arrow_forward),
  onTap: () {},
)

In the code snippet above, leading, title, subtitle, trailing, and onTap are the various properties of a ListTile.

leading property adds an icon or an image to the left of the title property.

title property is used to add the main text within the ListTile.

subtitle property adds the text beneath the title property.

trailing property adds an icon or an image to the right of the title property.

onTap property is used to add a callback function that is executed when the user taps the ListTile.

Customizing ListTile

Developers can customize the ListTile widget in a variety of ways. Below are some of the ways to customize the widget.

• Add a divider between the ListTile widgets.

ListView.separated(
  separatorBuilder: (context, index) => Divider(),
  itemCount: _list.length,
  itemBuilder: (context, index) {
    var item = _list[index];
    return ListTile(
      title: Text(item.title),
      subtitle: Text(item.subtitle),
    );
  },
)

• Change the color of the ListTile.

ListTile(
  leading: Icon(Icons.grade_rounded, color: Colors.amber),
  title: Text('Title', style: TextStyle(color: Colors.red)),
  subtitle: Text('Subtitle', style: TextStyle(color: Colors.blue)),
  trailing: Icon(Icons.arrow_forward, color: Colors.green),
),

Conclusion

In conclusion, ListTile is a versatile Flutter widget that allows developers to create beautiful and customizable lists. Using ListTile is easy, and developers are free to customize it as per their application's design requirements.