Списки в flutter

07.12.2018 at 09:00

Для отображения списков в flutter используется виджет ListView. В свойство children нужно передать массив элементов списка

body: ListView(children: <Widget>[
  ListTile(title: Text('test 1')),
  ListTile(title: Text('test 2')),
  ListTile(title: Text('test 3'))
])

Выглядеть такой виджет будет вот так:

Содержимым ListView могут быть любые виджеты, не только ListTile. ListTile всего лишь подготовленный виджет, хорошо выглядящий в списке и имеющий много полезных свойств, например

ListTile(
  leading: Icon(Icons.work),
  title: Text('test 1'),
  trailing: Icon(Icons.star),
  subtitle: Text('subtitle text'),
  isThreeLine: true,
)

получится такой виджет:

Динамические списки в flutter

Чаще всего содержимое списка не известно заранее. Например данные загружаются с сервера или вводятся пользователем. Для таких ситуаций используется ListView.builder.

Создадим для примера тестовый массив данных

_data = new List<String>();
for (var i = 1; i <= 100; i++) {
  _data.add('test ' + i.toString());
}

Теперь отобразим эти данные в списке

new Expanded(
  child: ListView.builder(
    itemCount: _data.length,
    itemBuilder: (context, index) {
      return ListTile(title: Text('${_data[index]}'));
    },
  )
)

В itemBuilder передается функция, создающая виджет для каждого объекта данных. Единственная проблема здесь — количество элементов нужно знать заранее.

Вот так выглядит получившийся список:

Виртуальность списка в flutter

Если бы для всего массива данных виджеты генерировались бы сразу — приложение бы сильно тормозило на больших объемах данных. flutter поступает умнее и генерирует виджеты только для видимой части списка + несколько невидимых сверху и снизу. Например для скриншота выше в flutter inspector видно, что созданы виджеты для элементов от test 8 до test 27.