Виджет ListTile

Виджет ListTile оформляет одну строку в списках и меню. Главный текст передают в title, дополнительный - в subtitle, иконку слева - в leading, виджет справа - в trailing. Нажатие обрабатывают через onTap.

Синтаксис

ListTile(
	leading: Icon(Icons.person),
	title: Text('abcde'),
	subtitle: Text('12345'),
	trailing: Icon(Icons.chevron_right),
	onTap: () {},
)

Параметры

Параметр	Описание
`title`	Основная подпись строки.
`subtitle`	Вторичный текст под заголовком.
`leading`	Виджет слева, часто иконка или аватар.
`trailing`	Виджет справа, например стрелка или переключатель.
`onTap`	Обработчик нажатия на всю строку.

Пример

Давайте выведем список из двух строк:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: ListView(
					children: [
						ListTile(
							title: Text('abcde'),
							subtitle: Text('12345'),
						),
						ListTile(
							leading: Icon(Icons.star),
							title: Text('12345'),
						),
					],
				),
			),
		),
	);
}

На экране две строки: первая с подзаголовком, вторая со звездой слева.

Пример

Давайте добавим trailing и onTap:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: ListTile(
					title: Text('abcde'),
					trailing: Icon(Icons.arrow_forward),
					onTap: () {},
				),
			),
		),
	);
}

Строка реагирует на нажатие, справа видна стрелка.

Смотрите также

виджет ListView,
куда часто кладут несколько ListTile
виджет Drawer,
где пункты меню оформляют ListTile
виджет CircleAvatar,
который ставят в leading
виджет SwitchListTile,
который добавляет переключатель в строку