Flutter ListTile Widget (original) (raw)

Last Updated : 08 Jun, 2025

**The ListTile widget is used to populate a ListView in Flutter. It contains a **titleas well as **leading or trailingicons. Let's understand this with the help of an example.

**Constructor of the ListTile class

ListTile ListTile({
Key? key,
Widget? leading,
Widget? title,
Widget? subtitle,
Widget? trailing,
bool isThreeLine = false,
bool? dense,
VisualDensity? visualDensity,
ShapeBorder? shape,
ListTileStyle? style,
Color? selectedColor,
Color? iconColor,
Color? textColor,
TextStyle? titleTextStyle,
TextStyle? subtitleTextStyle,
TextStyle? leadingAndTrailingTextStyle,
EdgeInsetsGeometry? contentPadding,
bool enabled = true,
void Function()? onTap,
void Function()? onLongPress,
void Function(bool)? onFocusChange,
MouseCursor? mouseCursor,
bool selected = false,
Color? focusColor,
Color? hoverColor,
Color? splashColor,
FocusNode? focusNode,
bool autofocus = false,
Color? tileColor,
Color? selectedTileColor,
bool? enableFeedback,
double? horizontalTitleGap,
double? minVerticalPadding,
double? minLeadingWidth,
double? minTileHeight,
ListTileTitleAlignment? titleAlignment,
bool internalAddSemanticForOnTap = true,
})

Properties

**Example of ListTitle Widget

**main.dart:

main.dart `

// ignore_for_file: deprecated_member_use // This comment tells the Dart analyzer to ignore warnings about deprecated members being used. // Importing Flutter's Material package which contains UI components. import 'package:flutter/material.dart';

// The main function is the entry point of the Flutter application. void main() { runApp(const MyApp()); // Running the root widget of the app. }

// Defining a stateless widget named MyApp. class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); // Constructor with optional key.

// The build method describes the part of the UI represented by this widget. @override Widget build(BuildContext context) { return MaterialApp( title: 'ListTile', // Title of the app. theme: ThemeData(primarySwatch: Colors.blue), // Setting the app theme with a blue color. home: const MyHomePage(), // Setting MyHomePage as the home screen. debugShowCheckedModeBanner: false, // Hides the debug banner. ); } }

// Defining a stateful widget named MyHomePage. class MyHomePage extends StatefulWidget { const MyHomePage({Key? key}) : super(key: key); // Constructor with optional key.

@override // Creates the mutable state for this widget. _MyHomePageState createState() => _MyHomePageState(); }

// The state class associated with MyHomePage. class _MyHomePageState extends State { String txt = ''; // Variable to hold the text shown after tapping ListTile.

@override Widget build(BuildContext context) { return Scaffold( // AppBar displays a toolbar at the top of the screen. appBar: AppBar( title: const Text('GeeksforGeeks'), // AppBar title. backgroundColor: Colors.green, // Background color of AppBar. foregroundColor: Colors.white, // Text/icon color on AppBar. ), backgroundColor: Colors.grey[100], // Background color of the page body.

  // The main content of the page, organized in a column.
  body: Column(
    children: <Widget>[
      // Adds padding around the ListTile container.
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          color: Colors.blue[50], // Background color of the container.
          child: ListTile(
            leading: const Icon(Icons.add), // Icon displayed at the start.
            title: const Text('GFG title', textScaleFactor: 1.5), // Main title with increased text size.
            trailing: const Icon(Icons.done), // Icon displayed at the end.
            subtitle: const Text('This is subtitle'), // Secondary text below the title.
            selected: true, // Visually marks the ListTile as selected.
            // Function executed when the ListTile is tapped.
            onTap: () {
              setState(() {
                txt = 'List Tile pressed'; // Updates the text when tapped.
              });
            },
          ),
        ),
      ),
      // Displays the updated text when ListTile is pressed.
      Text(txt, textScaleFactor: 2), // Doubles the size of the text.
    ],
  ),
);

} }

`

**Output:

If the properties are defined as below:

const ListTile(
leading: Icon(Icons.add),
title: Text(
'GFG title',
textScaleFactor: 1.5,
),
trailing: Icon(Icons.done),
),

The following design changes can be observed:

If the properties are defined as below:

const ListTile(
leading: Icon(Icons.add),
title: Text(
'GFG title',
textScaleFactor: 1.5,
),
trailing: Icon(Icons.done),
subtitle: Text('This is subtitle'),
selected: true,
),

The following design changes can be observed:

If the properties are defined as below:

ListTile (
leading: const Icon(Icons.add),
title: const Text(
'GFG title',
textScaleFactor: 1.5,
),
trailing: const Icon(Icons.done),
subtitle: const Text('This is subtitle'),
selected: true,
onTap: () {
setState(() {
txt = 'List Tile pressed';
});
},
),
// when user tap the list tile then below output will be shown.

The following design changes can be observed:

Output:

• Create a **ListTile widget and wrap it with a **Container widget.
• After that, give **ListTile a _title, _leading, _trailing, _onTap, etc.
• Add other widgets also, like _subtitle, _selected, etc.