ListTile Widget

What is ListTile Widget?

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

Default Constructor

The default constructor creates a list tile.

ListTile(
    leading: const Icon(Icons.settings),
    title: Text('Settings'),
    trailing: const Icon(Icons.arrow_forward_ios),
);

List tiles are typically used in ListViews, or arranged in Columns in Drawers and Cards.

Constructor Parameters

It contains many input parameters which can be configured to change its behavior and appearance.

Configure leading parameter to define a widget to display before the title. Typically an Icon or a CircleAvatar widget.

Configure title parameter to define the primary content of the list tile. Typically a Text widget.

Configure trailing parameter to define a widget to display after the title. Typically an Icon widget.

Code snippet

The following code snippet shows how to configure ListTile widget.

ListTile(
    leading: const Icon(Icons.settings),
    title: Text('Settings'),
    trailing: const Icon(Icons.arrow_forward_ios),
);

Demo Code

This example shows how to display lis to tile using ListView.

import 'package:flutter/material.dart';

class ListTileDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        Card(
          child: ListTile(
            leading: const Icon(Icons.settings),
            title: Text('Settings'),
            trailing: const Icon(Icons.arrow_forward_ios),
          ),
        ),
        Card(
          child: ListTile(
            leading: const Icon(Icons.wifi),
            title: Text('WIFI'),
            trailing: const Icon(Icons.arrow_forward_ios),
          ),
        ),
        Card(
          child: ListTile(
            leading: const Icon(Icons.accessibility),
            title: Text('Accessibility'),
            trailing: const Icon(Icons.arrow_forward_ios),
          ),
        ),
      ],
    );
  }
}

// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'ListTile';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: Center(
          child: Material(child: ListTileDemo()),
        ),
      ),
    );
  }
}

void main() => runApp(MyApp());