Flutter – ListTile Widget

Last Updated : 28 Aug, 2024

The ListTile widget is used to populate a ListView in Flutter. It contains a title as well as leading or trailing icons. Let’s understand this with the help of an example.

The Constructor of the ListTile class

ListTile({
    Key key, 
        Widget leading, 
        Widget title, 
        Widget subtitle, 
        Widget trailing, 
        
    bool isThreeLine: false, 
    bool dense, 
    
    VisualDensity visualDensity, 
    ShapeBorder shape, 
    EdgeInsetsGeometry contentPadding, 
   
    bool enabled: true, 
   
    GestureTapCallback onTap, 
    GestureLongPressCallback onLongPress, 
    MouseCursor mouseCursor, 
   
    bool selected: false, 
    Color focusColor, 
    Color hoverColor, 
    FocusNode focusNode, 
    bool autofocus: false
  }
)

Properties

	Description
autofocus	This property takes in a boolean as the object to decide whether this widget will be selected on the initial focus or not.
contentPadding	By taking EdgeInsetsGeometry as the object this property controls the padding.
dense	This property decides whether the ListTile will be a part of a vertically dense list or not by taking in a boolean as the object.
enable	This property controls whether the ListTile will be interactive or not by taking in a boolean as the object.
focusColor	This property holds Color class as the object to control the color of the widget at the time of input focus.
focusNode	This property provides an additional node.
hoverColor	This property takes in Color class as the object to decide the color of the tile at the time of hover.
isThreeLine	Whether this list item should display three lines of text or not.
leading	leading widget of the ListTile.
mouseCursor	The mouseCursor property holds MouseCursor class as the object to decide the cursor for the mouse pointer at the time of pointer event.
onLongPress	This holds GestureLongPressCallback typedef as the object
onTap	function to be called when the list tile is pressed.
selected	This property holds a boolean as the object. If set to true then the text and icon will be painted with the same color.
selectedTileColor	This property controls the background color of the ListTile when it is selected.
shape	the shape of the title’s InkWell.
subtitle	additional content displayed below the title.
titleColor	This property defines the background color of the ListTile when it is not selected, by taking in Color class as the object.
tile	title to be given to ListTile widget.
trailing	trailing widget of the ListTile.
visualDensity	This property takes in VisualDensity class as the object. It defines the compactness in the layout of the ListTile.

Example of ListTitle Widget

The main.dart file.

main.dart

import 'package:flutter/material.dart';

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

// Class 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

// This widget is
//the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListTile',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

// Class 
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  // ignore: library_private_types_in_public_api
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String txt = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GeeksforGeeks'),
        backgroundColor: Colors.green,
      ),
      backgroundColor: Colors.grey[100],
      body: Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              color: Colors.blue[50],
              child: 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';
                  });
                },
              ),
            ),
          ),
          Text(
            txt,
            textScaleFactor: 2,
          )
        ],
      ),
    );
  }
}

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:

listtile widget

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:

listtile with text

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: