Flutter: ListTile examples

A few examples of the ListTile widgets in Flutter.

Example 1 (Simple)

The code:

Card(
          elevation: 5,
          child: ListTile(
            leading: Icon(Icons.icecream),
            title: Text('I like icecream'),
            subtitle: Text('Icream is good for health'),
            trailing: Icon(Icons.food_bank),
          ),
        ),

Output:

Example 2: Using ListTile with ListVIew.builder

The code:

class MyHomePage extends StatelessWidget {
  // Generate some dummy data
  final List dummyList = List.generate(1000, (index) {
    return {
      "id": index,
      "title": "This is the title $index",
      "subtitle": "This is the subtitle $index"
    };
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
            child: ListView.builder(
      itemCount: dummyList.length,
      itemBuilder: (context, index) => Card(
        elevation: 6,
        margin: EdgeInsets.all(10),
        child: ListTile(
          leading: CircleAvatar(
            child: Text(dummyList[index]["id"].toString()),
            backgroundColor: Colors.purple,
          ),
          title: Text(dummyList[index]["title"]),
          subtitle: Text(dummyList[index]["subtitle"]),
          trailing: Icon(Icons.add_a_photo),
        ),
      ),
    )));
  }
}

Output:

Example 3: Using ListTile.divideTiles

AdvertisementsBy using ListTile.divideTiles, a one-pixel border will be automatically added in between each tile.

The complete code:

// main.dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        // Remove the debug banner
        debugShowCheckedModeBanner: false,
        title: 'Kindacode.com',
        theme: ThemeData(
          primarySwatch: Colors.deepPurple,
        ),
        home: HomePage());
  }
}

class HomePage extends StatelessWidget {
  // Generate some dummy data
  final List<Map<String, dynamic>> _items = List.generate(
      10,
      (index) =>
          {"id": index, "title": "Item $index", "subtitle": "Subtitle $index"});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Kindacode.com'),
        ),
        body: ListView(
            children: ListTile.divideTiles(
                color: Colors.deepPurple,
                tiles: _items.map((item) => ListTile(
                      leading: CircleAvatar(
                        backgroundColor: Colors.amber,
                        child: Text(item['id'].toString()),
                      ),
                      title: Text(item['title']),
                      subtitle: Text(item['subtitle']),
                      trailing: IconButton(
                        icon: Icon(Icons.delete),
                        onPressed: () {},
                      ),
                    ))).toList()));
  }
}

Output:

Example 4: Using ListTileTheme

The ListTileTheme widget defines color and style parameters for its descendant ListTile widgets.

The full code:

// main.dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        // Remove the debug banner
        debugShowCheckedModeBanner: false,
        title: 'Kindacode.com',
        theme: ThemeData(
          primarySwatch: Colors.green,
        ),
        home: HomePage());
  }
}

class HomePage extends StatelessWidget {
  // Generate some dummy data
  final List<Map<String, dynamic>> _items = List.generate(
      100,
      (index) =>
          {"id": index, "title": "Item $index", "subtitle": "Subtitle $index"});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Kindacode.com'),
        ),
        body: ListTileTheme(
          contentPadding: EdgeInsets.all(15),
          iconColor: Colors.red,
          textColor: Colors.black54,
          tileColor: Colors.yellow[100],
          style: ListTileStyle.list,
          dense: true,
          child: ListView.builder(
            itemCount: _items.length,
            itemBuilder: (_, index) => Card(
              margin: EdgeInsets.all(10),
              child: ListTile(
                title: Text(_items[index]['title']),
                subtitle: Text(_items[index]['subtitle']),
                trailing: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    IconButton(onPressed: () {}, icon: Icon(Icons.edit)),
                    IconButton(onPressed: () {}, icon: Icon(Icons.delete)),
                    IconButton(onPressed: () {}, icon: Icon(Icons.add_box)),
                  ],
                ),
              ),
            ),
          ),
        ));
  }
}

Screenshot:

Wrapping Up

We’ve gone through some examples of using ListTile, a common widget in Flutter. If you’d like to explore more new and interesting stuff about Flutter and Dart, take a look at the following articles:

• Flutter AnimatedList – Tutorial and Examples
• Adding and Customizing a Scrollbar in Flutter
• Flutter & SQLite: CRUD Example
• Flutter: Firebase Remote Config example
• Working with ElevatedButton in Flutter

You can also check out our Flutter category page or Dart category page for the latest tutorials and examples.