×
×

Spread the love

Flutter ListTile

Listtile is a material widget in flutter used to display some text and an icon or other widget. We can have the widget at the start or end of the title. The widget can be shown using leading or trailing property. List tile has two properties title and subtitle to display some text. The title is mandatory where the subtitle is optional. If we set the threeLine property to true the subtitle will occupy two lines else it will wrap in one line. Make sure the title and subtitle are of optimal length or else they will wrap. Generally, list titles are used as children in listviews.

Constructor:

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, 
Color tileColor, Color selectedTileColor
}) 

Flutter ListTile Example

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(MyApp());
}
//void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
  @override
  _MyState createState() {
    return _MyState();
  }
}

class _MyState extends State<MyApp>
{
  bool _value = false;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.green[400],
            title: Text("Flutter ListTile"),
          ),
          body: ListTile(
           leading: Icon(Icons.account_circle),
            title: Text("Codesinsider"),
            selectedTileColor:Colors.green[400],
            onTap: () {
              setState(() {

              });
            },
          )
        )
    );
  }
}

Output:

flutter-listtile

Flutter ListTile Properties

The flutter ListTile properties are:

  • title
  • subtitle
  • leading
  • trailing
  • selected
  • enabled
  • shape
  • dense
  • tileColor
  • selectedTileColor
  • contentPadding
  • onTap

Lets see each property with example.

title

We can use any widget for title property but as the name suggests, it should be a Text widget in general.

body: ListTile(
            title: Text("Codesinsider"),
            selectedTileColor:Colors.green[400],
            onTap: () {
              setState(() {

              });
            },
          )

Output:

flutter listtile title

subtitle

We will use subtitle property to display a subtext to the title text. Like title property subtitle also accepts any widget.

body: ListTile(
            title: Text("Codesinsider"),
            subtitle: Text("A blog for learning flutter"),
            selectedTileColor:Colors.green[400],
            onTap: () {
              setState(() {

              });
            },
          )

Output:

flutter listtile subtitle

leading

We will use leading property to display an icon/image or any other widget at the starting of the ListTile.

body: ListTile(
            title: Text("Codesinsider"),
            subtitle: Text("A blog for learning flutter"),
            leading: Icon(Icons.hourglass_empty),
            selectedTileColor:Colors.green[400],
            onTap: () {
              setState(() {

              });
            },
          )

Output:

flutter listtile leading

trailing

We will use trailing property to display an icon/image or any other widget at the end of the ListTile.

body: ListTile(
            title: Text("Codesinsider"),
            subtitle: Text("A blog for learning flutter"),
            leading: Icon(Icons.hourglass_empty),
            trailing: Checkbox(
              value: false,
              onChanged: (value) {

              },
            ),
            selectedTileColor:Colors.green[400],
            onTap: () {
              setState(() {

              });
            },
          )

Output:

flutter listtile trailing

selected

We will use selected property if we want to render the text and icon colors with the theme’s primary color. We have to set this property to true to do so. By default the value for selected property is false.

body: ListTile(
            title: Text("Codesinsider"),
            subtitle: Text("A blog for learning flutter"),
            leading: Icon(Icons.hourglass_empty),
            selected: true,
            onTap: () {
              setState(() {

              });
            },
          )

Output:

flutter listtile selected

enabled

We will use enabled property to enable/disable the tap on the ListTile. If we set false to enabled property it will disable the tap/click. By default the value for enabled property is true.

body: ListTile(
            title: Text("Codesinsider"),
            subtitle: Text("A blog for learning flutter"),
            leading: Icon(Icons.hourglass_empty),
            selected: true,
            enabled: false,
            onTap: () {
              setState(() {

              });
            },
          )

Output:

flutter listtile enabled

dense

We will use the dense property to make the text smaller. Setting this property to true will make the text small. By default the value is false.

body: ListTile(
            title: Text("Codesinsider"),
            subtitle: Text("A blog for learning flutter"),
            leading: Icon(Icons.hourglass_empty),
            dense: true,
            onTap: () {
              setState(() {

              });
            },
          )

Output:

flutter listtile dense

tileColor

We will use tileColor property to change the background color of the tile. By default the background color is white.

body: ListTile(
            title: Text("Codesinsider"),
            subtitle: Text("A blog for learning flutter"),
            leading: Icon(Icons.hourglass_empty),
            dense: true,
            tileColor: Colors.grey,
            onTap: () {
              setState(() {

              });
            },
          )

Output:

flutter listtile tilecolor

selectedTileColor

We will use selectedTileColor property to change the background color of the tile when the tile’s selected property is true (when the tile is selected). I’m setting the selected property to true to view the output.

body: ListTile(
            title: Text("Codesinsider"),
            subtitle: Text("A blog for learning flutter"),
            leading: Icon(Icons.hourglass_empty),
            tileColor: Colors.grey,
            selectedTileColor: Colors.yellowAccent,
            selected: true,
            onTap: () {
              setState(() {

              });
            },
          )

Output:

flutter listtile selected tilecolor

contentPadding

We will use the contentPadding property to apply padding to the content of the ListTile.

body: ListTile(
            title: Text("Codesinsider"),
            subtitle: Text("A blog for learning flutter"),
            leading: Icon(Icons.hourglass_empty),
            tileColor: Colors.grey,
            contentPadding: EdgeInsets.symmetric(horizontal: 60),
            onTap: () {
              setState(() {

              });
            },
          )

Output:

flutter listtile contentpadding

onTap

We will use onTap property to listen whether the list tile is clicked/pressed. When we tap the ListTile the onTap callback will be invoked where we can execute our logic.

onTap: () {
    setState(() {
     //Do whatever you want here
    });
},

That brings an end to flutter ListTile example tutorial. Let’s catch up with some other flutter widget in the next post. Have a great day!!

Do share, subscribe and like my facebook page if you find this post helpful. Thank you!!

Reference: Flutter Official Documentation


Spread the love

AUTHOR

Naresh Pradeep

Hey there! I am the founder of CodesInsider and android developer.I love to code and build apps.


Related Posts

Leave a Reply

Your email address will not be published.