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:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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,)
        ],
      ),
    );
  }
}

chevron_right


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:

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.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : ankit_kumar_