Flutter на практике (ListTile)

Андрей Кейда · 20.08.2019

Статья написана для старой версии Flutter и сейчас обновляется. Часть кода может не компилироваться на актуальной версии.

ListTile - это виджет на подобие CardView в Android, который представляет собой список, который может содержать от одной до трех строк текста, окруженных значками или другими виджетами, такими как пиктограммы (или другие) для тайла определяются с начальными и конечными параметрами. Первая строка текста не является обязательной и указывается с заголовком. Значение subtitle, которое является необязательным, будет занимать пространство, выделенное для дополнительной строки текста или двух строк, если isthreeline имеет значение true.

Как это выглядит на практике :

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'My App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter на практике (ListTile)')),
        body: BodyWidget(),
      ),
    );
  }
}

class BodyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        ListTile(  // Наш ListTile
          leading: CircleAvatar(  // Тип аватара списка
            backgroundColor: Colors.red, // Цвет аватара
          ),
          title: Text('Audi'), // Основной текст (название)
          subtitle: Text('Audi - idea for Life'), // Текст описания
          trailing: Icon(Icons.keyboard_arrow_right), // Иконка списка с права '>'
          onTap: () {
            print('Hello Audi'); // Заглушка, где необходимо указать действие после клика
          },

        ),
        ListTile(  // Второй ListTile
          leading: CircleAvatar(
            backgroundColor: Colors.blueGrey,
          ),
          title: Text('Toyota'),
          subtitle: Text('Toyota - freedom of mind'),
          trailing: Icon(Icons.arrow_downward), // Заменили иконку на стрелку вниз
          onTap: () {
            print('Hello Toyota'); // Заглушка выводит сообщение в консоль
          },
        ),

      ],
    );
  }
}

Результат:

Описание картинки с котиком

Разберем немного подробнее:

backgroundColor - установка цвета аватара, но в место него можно использовать backgroundImage и вывести изображение. Например:

backgroundImage: NetworkImage(URL)

title и subtitle - заголовок (title) может принимать любой виджет, но обычно текстовый. Подзаголовок (subtitle) это текст меньшего размера под основным заголовком. leading - можно добавить изображение или значок в начало списка. trailing - установка изображения в конце списка (значки из библиотеки Flutter) onTap - отслеживаем нажатие и совершаем событие ...

Более подробно в документации: DOC-FLUTTER-ListTile