Flutter – ListTile Widget

14 Jun, 2022
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.
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})
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());} // Classclass 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,    );  }} // Classclass 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.
ankit_kumar_
android
Flutter
Flutter-widgets
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.