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.

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

Billboard image

๐Ÿ“Š A side-by-side product comparison between Sentry and Crashlytics

A free guide pointing out the differences between Sentry and Crashlytics, thatโ€™s it. See which is best for your mobile crash reporting needs.

See Comparison

๐Ÿ‘‹ Kindness is contagious

Please leave a โค๏ธ or a friendly comment on this post if you found it helpful!

Okay