Flutter ListTile widget Implementation : Make a Beautiful Tile

Flutter ListTile is a widget that allows you to create a widget of a fixed Size. It allows you to add some text at the beginning or start of the widget and end of the widget. To achieve it uses leading and trailing attributes.

In this entire tutorial, you will learn how to create a Flutter ListTile widget and manipulate it through various attributes.

How to create a Flutter ListTile Widget?

Flutter provides a ListTile() class to create a ListTile() widget. There are many attributes inside the ListTile() constructor that allows you to manipulate the ListTile() widget.

Let’s create a Simple ListTile Widget without any widgets.

import 'package:flutter/material.dart';

class ListTileApp extends StatefulWidget {
  const ListTileApp({Key? key}) : super(key: key);

  @override
  State createState() => _ListTileAppState();
}

class _ListTileAppState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeWidget(),
    );
  }
}

class HomeWidget extends StatelessWidget {
  const HomeWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Code The Best")),
      body: Center(
        child: Card(
          color: Colors.red,
          child: ListTile(),
        ),
      ),
    );
  }
}

void main() {
  runApp(ListTileApp());
}

Here I have created a Stateful Widget and a Separate HomeWidget for the Home UI. The HomeWiget() is returning the Scaffold() widget. Inside it, I have created an AppBar and the body attributed contains Card() widget with ListTile() as a Child Wiget.

You will get the output like the below.

How to Manipulate ListTile Widget

In this section, you will know all the major attributes that you will generally use to manipulate ListTile() widget. All the attributes will called inside the ListTile() widget.

1. title

The title attribute allows you to add the primary title to the ListTile widget. It accepts Text widget.

title: Text("Code The Best ListTile"),

Output

2. textColor

The textColor attribute allows you to change the color of the both title and subtitle for the ListTile. Let’s change the color of the text to white.

ListTile(
            title: Text("Code The Best ListTile"), 
            textColor: Colors.white),
      ),

Output

3. leading

This attribute allows you to add a widget before the title on the ListTile. You can add any widget but the most common is Icon or CircleAvatar. In this example, I will add the CircleAvtar widget before the Primary title of the ListTile widget. Inside the CircleAvatar() there is an Icon Widget.

leading: CircleAvatar(
            child: Icon(Icons.people_outline),

Output

4. trailing

You can add a widget after the title using the trailing widget. Generally, you will add the Icon Widget after the title. For example, I will add the favorite icon button after the title then I will add the below line of code.

trailing: Icon(
            Icons.favorite_border_outlined,
           

Output

5. iconColor

However you can define the color for the icon by defining the color attribute inside the Icon() widget. But you can also change the color of the Icons for both the leading and trailing widget using the iconColor

iconColor:Colors.white

6. subtitle

The subtle property allows you to add subtitle below the main or primary title of the ListTile widget.

subtitle: Text("This is subtitle text")

Output

7. onTap

You can also make the whole ListTile as a Gesture Tap callback using the onTap property. For example when the user tap the ListTile widget then the SnackBar message will be shown to the user. To do so you have to add Flutter Snackbar widget code inside the onTap() callback function.

onTap: () {
              final snackbar =
                  SnackBar(content: const Text("Text Button is Clicked"));

              ScaffoldMessenger.of(context).showSnackBar(snackbar);
            },

Output

Full Code

import 'package:flutter/material.dart';

class ListTileApp extends StatefulWidget {
  const ListTileApp({Key? key}) : super(key: key);

  @override
  State createState() => _ListTileAppState();
}

class _ListTileAppState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeWidget(),
    );
  }
}

class HomeWidget extends StatelessWidget {
  const HomeWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Code The Best")),
      body: Center(
        child: Card(
          color: Color.fromRGBO(244, 67, 54, 1),
          child: ListTile(
            title: Text("Code The Best ListTile"),
            textColor: Colors.white,
            leading: CircleAvatar(
              child: Icon(Icons.people_outline),
            ),
            trailing: Icon(
              Icons.favorite_border_outlined,
              color: Colors.white,
            ),
            subtitle: Text("This is subtitle text"),
            onTap: () {
              final snackbar =
                  SnackBar(content: const Text("Text Button is Clicked"));

              ScaffoldMessenger.of(context).showSnackBar(snackbar);
            },
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(ListTileApp());
}

Output

Conclusion

Flutter ListTile widget allows you to build widgets to quickly populate information on the UI. This widget is used with a flutter card where you load lots of information on the screen like ListView Builder. Using it as a child of Flutter Container, you can make it more beautiful.

I hope you have liked this tutorial on the implementation of the Flutter ListTile. If you have any questions then you can contact us for help.