Flutter – ListTile Widget

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

Constructor of 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

• 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:

The main.dart file.

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:

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 explanation:

• Create a ListTile widget and wrap it with Container widget.
• After that, give ListTile a title, leading, trailing, onTap, etc.
• Add other widgets also like subtitle, selected, etc.