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

Андрей Кейда

20.08.2019 14:37:18

За все время: 4697 просмотров, 2118 посетителей.
За последние 30 дней: 7 просмотров, 4 посетителя.

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

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: <Widget>[
        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

Подборка заметок