Open In App

Flutter – ListTile Widget

Improve
Improve
Like Article
Like
Save
Share
Report

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:

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:

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.


Last Updated : 14 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads