List Tiles

Part of the Lists and Screens section of Coddy's Flutter journey. Lesson 2 of 33.

Most rows in a list look alike: a main line, sometimes a smaller line under it, maybe an icon at each end. ListTile is that row, ready made, with the right sizes and padding.

ListTile(
  title: Text('Ada Lovelace'),
  subtitle: Text('+1 555 0101'),
)

The title is the main line. The subtitle goes under it, smaller and in a softer color. Both take a widget, usually a Text.

A ListTile is as wide as its list and grows to fit two lines when it has a subtitle. Put several in a ListView and you have a contact list.

Challenge

Easy

Ada's row is already a ListTile. Turn the other two texts into tiles like hers:

Alan Turing with the subtitle +1 555 0102
Grace Hopper with the subtitle +1 555 0103

Try it yourself

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Contacts')),
        body: ListView(
          children: const [
            ListTile(
              title: Text('Ada Lovelace'),
              subtitle: Text('+1 555 0101'),
            ),
            Text('Alan Turing'),
            Text('Grace Hopper'),
          ],
        ),
      ),
    );
  }
}