ListTile

ListTile is a common and versatile widget in Flutter that's used to create individual items or tiles in a list. It's typically used within a ListView or ListView.builder to display a list of items, such as a menu, settings, or any other list-based user interface. ListTile simplifies the creation of individual list items by providing a pre-designed layout that includes text, icons, and other common elements. Here's an overview of the ListTile widget:

Key Properties and Features:

  1. leading: The leading property is used to specify a widget, usually an Icon or Image, that appears at the beginning of the ListTile. This is typically used for displaying an icon or avatar.

  2. title: The title property is used to specify the primary content of the ListTile. It's usually a Text widget but can be any widget.

  3. subtitle: The subtitle property is used to provide additional descriptive text below the title. It's often used for secondary information.

  4. trailing: The trailing property is used to specify a widget that appears at the end of the ListTile. Similar to leading, it's often used for icons or buttons, such as a delete button or a checkbox.

  5. onTap: The onTap property allows you to specify a function that will be called when the ListTile is tapped, making it interactive. If onTap is null, the ListTile won't respond to taps.

  6. isThreeLine: When true, the ListTile is optimized for a layout with a long title and subtitle. It increases the spacing between the title and subtitle.

  7. dense: When true, the ListTile has reduced padding and smaller fonts, making it more compact.

  8. selected: Indicates whether the ListTile is in a selected state, which can be useful for creating selectable lists.

Example Usage:

Here's a simple example of using ListTile within a ListView:

ListView(
  children: <Widget>[
    ListTile(
      leading: Icon(Icons.home),
      title: Text('Home'),
      onTap: () {
        // Handle tap action
      },
    ),
    ListTile(
      leading: Icon(Icons.settings),
      title: Text('Settings'),
      onTap: () {
        // Handle tap action
      },
    ),
    // Add more ListTiles as needed
  ],
)

In the code above, we've created a ListView with two ListTile items. Each ListTile consists of an Icon, a title, and an onTap function to define what happens when the item is tapped. You can customize the appearance and behavior of ListTile items to suit your specific use case.

ListTile is a versatile widget, and you can use it to create various types of lists, menus, or settings screens in your Flutter applications.

Last updated