ListTile Widget in Flutter | Androidmonks

ListTile in Flutter with Example in Android Studio

ListTile in Flutter is similar to the concept of Cards in Android. These widgets are much more flexible and often used along with a List in Flutter. You can create a ListWidget and make use of ListTile as its children. According to the Flutter doc,

“A single fixed-height row that typically contains some text as well as a leading or trailing icon”

YOU ARE YOUR BOSS
I agree to have my personal information transfered to MailChimp ( more information )
Join over 5.000 visitors who are receiving our free content and learn how to program with Android. The growth of Android is estimated to reach a whooping 83% by 2020. Hop on the train and start making money!
We hate spam. Your email address will not be sold or shared with anyone else.

A list tile contains one to three lines of text optionally flanked by icons or other widgets, such as checkboxes. The icons (or other widgets) for the tile are defined with the leading and trailing parameters. The first line of text is not optional and is specified with title. The value of subtitle, which is optional, will occupy the space allocated for an additional line of text, or two lines if isThreeLine is true. We will look at these properties in detail below.

ListTile Basics

To create a simple ListTile, make use of the ListTile widget class like shown below.

import 'package:flutter/material.dart';
void main()
{
  runApp(MaterialApp(
    title: 'Androidmonks',
    home: Scaffold(
      appBar: AppBar(title: Text("Androidmonks"),),
      body: ListView(
        children: <Widget>[
          ListTile()
        ],
      ),
    ),
  ));
}

Creating a Simple Scaffold widget and using the ListView widget as its body. The ListView oftentimes needs a list of items and it is important to use a good looking list. ListTile can be very helpful for this purpose in particular.

It can create a simple looking card like a list of items without the need for specifying the boundary etc.

We will see some of the properties of the ListTile and how it can be used to improve the widget.

ListTile widget – Properties

title

Title is the first line of the ListTile widget. It occupies the top part and takes in a Text widget as its value.

You can create a simple ListTile widget with Title attribute as given below.

ListTile(title: Text("ListTile"),)

Upon running this application, you get.

ListTile widget title
ListTile widget title

subtitle

Just as the name suggests, the Subtitle occupies the second line of the ListTile widget. It also takes in the value of Text widget. To create a simple subtitle attribute, you can see the code as given below.

ListTile(title: Text("ListTile"),
         subtitle: Text("Sample Subtitle"),)

The subtitle looks smaller in font and creates a good Subtitle like effect as given below.

Subtitle attribute in ListTile
Subtitle attribute in ListTile

trailing

Trailing is an attribute that takes in an Image/Icon as its value. The trailing attribute occupies the sides of the ListTile and creates a simple List like effect with Images. To create a simple Trailing attribute, check out the code example below.

ListTile(title: Text("ListTile"),
         subtitle: Text("Sample Subtitle"),
         trailing: Icon(Icons.home),
)

The final ListTile looks like below,

Trailing attribute in ListTile widget
Trailing attribute in ListTile widget

contentPadding

Just as the name suggests, the contentPadding attribute gives padding to the content inside the ListTile. The title/subtitle is padded on all sides by the ListTile widget. The attribute takes in an EdgeInsetGeometry as its value and can be used like given below.

ListTile(title: Text("ListTile"),
         subtitle: Text("Sample Subtitle"),
         trailing: Icon(Icons.home),
         contentPadding: EdgeInsets.all(55.0),
)

This creates the same ListTile content from above, but gives it a padding. This looks like given below,

Content Padding attribute in ListTile widget
Content Padding attribute in ListTile widget

dense

This attribute lets the flutter engine decide if the items should be vertically arranged or not. The difference is the Title and subtitle differentiation is removed and all of the Text looks the same if the dense is set to false.

To change the dense property, check the code below,

ListTile(title: Text("ListTile"),
         subtitle: Text("Sample Subtitle"),
         trailing: Icon(Icons.home),
         dense: false,
)

This creates a ListTile that looks like,

Dense attribute in ListTile
Dense attribute in ListTile

enabled

This specified whether the user can interact with the ListTile or not. The list tile can be clicked by the user. If there is a need to not allow the user to create a click action on that Title, the enabled attribute can be set to false like shown below.

ListTile(title: Text("ListTile"),
         subtitle: Text("Sample Subtitle"),
         trailing: Icon(Icons.home),
         enabled: false,
)

This creates a light gray colored text which denotes that the ListTile cannot be clicked. To understand how this works, see the example app below.

ListTile is disabled
ListTile is disabled

isThreeLine

By default, the ListTile in flutter can display only 2 lines. The Title and the SubTitle. In case there is a third line of text to be displayed, the isThreeLine is set to true and can allow another line to be present. The subtitle will be taking care of giving the 3rd line of text. It is expected that, if the isThreeLine is set to true, the subtitle should be non-null.

To set this property, check the code below,

ListTile(title: Text("ListTile"),
         subtitle: Text("Sample Subtitle. \nSubtitle line 3"),
         trailing: Icon(Icons.home),
         isThreeLine: true,
)
isThreeLine set to true in ListTile
isThreeLine set to true in ListTile

leading

Leading is another attribute that lets any widget be present to the Left of the Title,Subtitle widget. This portion is given to the Leading Attribute. Just like the trailing widget which occupies the space to the right of the Title/Subtitle, the leading occupies the left.

Check out the code below, to understand more about the leading Attribute.

ListTile(title: Text("ListTile"),
         subtitle: Text("Sample Subtitle. \nSubtitle line 3"),
         trailing: Icon(Icons.home),
         leading: Icon(Icons.add_box),
         isThreeLine: true,
)
`Leading attribute in ListTile widget
Leading attribute in ListTile widget

Click Actions attribute for ListTile

onLongPress

To create the control for the Long Press on the ListTile widget, the onLongPress callback is used. It gets fired whenever the user clicks long on the ListTile.

Just like mentioned above, the ListTile can be used as a button to perform action on it as well. To see how the onLongPress works, check the code example below.

ListTile(title: Text("ListTile"),
         subtitle: Text("Sample Subtitle. \nSubtitle line 3"),
         trailing: Icon(Icons.home),
         leading: Icon(Icons.add_box),
         isThreeLine: true,
         onLongPress: (){
            print("User has long pressed on the Tile");
         },
)

The result of the code is,

ListTile widget with onLongPressed callback
ListTile widget with onLongPressed callback

Like you can see, the output console now has the message printed on it.

onTap

If there are actions to be performed, when the user taps on the Title this callback can be used. Just like onLongPress, onTap is fired as soon as the user clicks on any item of the ListTile.

To understand how the onTap is used with ListTile in Flutter, see the code example below.

ListTile(title: Text("ListTile"),
         subtitle: Text("Sample Subtitle. \nSubtitle line 3"),
         trailing: Icon(Icons.home),
         leading: Icon(Icons.add_box),
         isThreeLine: true,
         onTap: (){
                print("On Tap is fired");
         },

)

This creates a simple callback fire and the message, “On Tap is fired” is printed on the console just like shown below,

ListTile with onTap callback in Flutter
ListTile with onTap callback in Flutter

ListTile in Flutter – Conclusion

Using ListTile in flutter saves a lot of time in arranging elements especially when it comes to creating a List of items. The callback fired can be very useful to open respective pages/actions without the need for complex controllers.

Since ListTile is heavily dependent on List of items, it can also be created dynamically with ease. Drop in any comments you have related to ListTile in the comment section below.

“Learn and Be Curious”

 

 

Also Read  ImageView in Android - Overview and Implementation

Leave a Comment

Your email address will not be published. Required fields are marked *