DEV Community

Cover image for Flutter ListTile
Aadarsh Kunwar
Aadarsh Kunwar

Posted on

1 1 1 1 1

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.

Sentry blog image

The countdown to March 31 is on.

Make the switch from app center suck less with Sentry.

Read more

Top comments (0)

Sentry growth stunted Image

If you are wasting time trying to track down the cause of a crash, it’s time for a better solution. Get your crash rates to zero (or close to zero as possible) with less time and effort.

Try Sentry for more visibility into crashes, better workflow tools, and customizable alerts and reporting.

Switch Tools