Leading and Trailing

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

A ListTile has a slot at each end. leading: goes before the title, usually an avatar or an icon. trailing: goes at the far end of the row, usually an icon or a short text such as a time.

ListTile(
  leading: CircleAvatar(child: Text('AL')),
  title: Text('Ada Lovelace'),
  trailing: Icon(Icons.call),
)

The tile lines everything up for you: the leading widget sits on the left, the title and subtitle fill the middle, and the trailing widget is pushed to the right edge. You write no Row and no SizedBox.

Challenge

Easy

Ada's row has an avatar with her initials and a phone icon. Give the other two rows the same:

a leading: CircleAvatar with the initials AT and GH
a trailing: Icon(Icons.call)

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(
              leading: CircleAvatar(child: Text('AL')),
              title: Text('Ada Lovelace'),
              subtitle: Text('+1 555 0101'),
              trailing: Icon(Icons.call),
            ),
            ListTile(
              title: Text('Alan Turing'),
              subtitle: Text('+1 555 0102'),
            ),
            ListTile(
              title: Text('Grace Hopper'),
              subtitle: Text('+1 555 0103'),
            ),
          ],
        ),
      ),
    );
  }
}