Skip to content
Related Articles

Related Articles

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:

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.
Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!
My Personal Notes arrow_drop_up
Recommended Articles
Page :