Logo

K-Learn

Flutter ListTile Widget

Posted on

< Previous Next >

The ListTile widget is used to create a single row in a list. It typically contains an icon, title, and subtitle. You can customize the appearance and behavior of the ListTile widget by using various properties.

Here's an example of how to use the ListTile widget:

@override
  Widget build(BuildContext context) {
    return ListView(
      children: const [
        Card(child: ListTile(title: Text('One-line ListTile'))),
        Card(
          child: ListTile(
            leading: FlutterLogo(),
            title: Text('One-line with leading widget'),
          ),
        ),
        Card(
          child: ListTile(
            title: Text('One-line with trailing widget'),
            trailing: Icon(Icons.more_vert),
          ),
        ),
        Card(
          child: ListTile(
            leading: FlutterLogo(),
            title: Text('One-line with both widgets'),
            trailing: Icon(Icons.more_vert),
          ),
        ),
        Card(
          child: ListTile(
            title: Text('One-line dense ListTile'),
            dense: true,
          ),
        ),
        Card(
          child: ListTile(
            leading: FlutterLogo(size: 56.0),
            title: Text('Two-line ListTile'),
            subtitle: Text('Here is a second line'),
            trailing: Icon(Icons.more_vert),
          ),
        ),
        Card(
          child: ListTile(
            leading: FlutterLogo(size: 72.0),
            title: Text('Three-line ListTile'),
            subtitle:
                Text('A sufficiently long subtitle warrants three lines.'),
            trailing: Icon(Icons.more_vert),
            isThreeLine: true,
          ),
        ),
      ],
    );
  }

Some common properties of the ListTile widget:

leading: An optional widget to display on the left of the ListTile.

title: The main title of the ListTile.

subtitle: An optional subtitle to display below the title.

trailing: An optional widget to display on the right of the ListTile.

onTap: An optional callback to be called when the ListTile is tapped.

< Previous Next >