Начало и конец

Часть раздела Списки и экраны путешествия по Flutter на Coddy. Урок 3 из 33.

У ListTile есть место с каждого края. leading: располагается перед заголовком, обычно там размещают аватар или значок. trailing: располагается в самом конце строки, обычно там размещают значок или короткий текст, например время.

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

Элемент сам выравнивает всё за тебя: ведущий виджет располагается слева, заголовок и подзаголовок занимают середину, а завершающий виджет сдвигается к правому краю. Тебе не нужно писать ни Row, ни SizedBox.

Задание

Легко

В строке Ады есть аватар с её инициалами и значок телефона. Добавь то же самое в две остальные строки:

leading: CircleAvatar с инициалами AT и GH
trailing: Icon(Icons.call)

Попробуйте сами

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'),
            ),
          ],
        ),
      ),
    );
  }
}