DEV Community

Cover image for Flutter ListTile
Aadarsh Kunwar
Aadarsh Kunwar

Posted on

Flutter ListTile

The ListTile widget in Flutter is a versatile and commonly used widget that allows you to create a row containing a title, subtitle, leading, trailing, and an on-tap action. It's perfect for creating items in a list view, making it easy to add rich, complex lists to your apps.
Here’s a basic example of how to use ListTile:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter ListTile Example'),
        ),
        body: ListView(
          children: [
            ListTile(
              leading: Icon(Icons.account_circle),
              title: Text('John Doe'),
              subtitle: Text('Software Engineer'),
              trailing: Icon(Icons.more_vert),
              onTap: () {
                // Action when tapped
                print('Tapped on John Doe');
              },
            ),
            ListTile(
              leading: Icon(Icons.account_circle),
              title: Text('Jane Smith'),
              subtitle: Text('Product Manager'),
              trailing: Icon(Icons.more_vert),
              onTap: () {
                // Action when tapped
                print('Tapped on Jane Smith');
              },
            ),
          ],
        ),
      ),
    );
  }
}

Enter fullscreen mode Exit fullscreen mode

Breakdown of ListTile properties:

  • leading: A widget to display before the title, typically an icon or an avatar.
  • title: The main text of the tile, often the name or primary information.
  • subtitle: Additional information under the title, usually a description or secondary text.
  • trailing: A widget to display after the title, often used for actions like buttons or icons.
  • onTap: A callback function that is called when the tile is tapped.

Top comments (0)