Flutter - ListTile Widget

Flutter – ListTile Widget

Difficulty Level : Expert
Last Updated : 24 Nov, 2020

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:

Syntax:
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';
import 'package:flutter/src/widgets/basic.dart';
import 'package:flutter/src/widgets/container.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  // This widget is 
  //the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListTile',
      theme: ThemeData(
       
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}
 
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
String txt='';
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: 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: Icon(Icons.add),
                title: Text('GFG title',textScaleFactor: 1.5,),
                trailing: Icon(Icons.done),
                subtitle: Text('This is subtitle'),
                selected: true,
                onTap: () {
                  setState(() {
                    txt='List Tile pressed';
                  });
                },
              ),
            ),
          ),
          Text(txt,textScaleFactor: 2,)
        ],
      ),
    );
  }
}

Output:

If the properties are defined as below:

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:

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: Icon(Icons.add),
                title: Text('GFG title',textScaleFactor: 1.5,),
                trailing: Icon(Icons.done),
                subtitle: 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: