Всем привет! На связи Арсен, Flutter-разработчик Mad Brains. Многие из вас наверняка уже знакомы с Slivers, ведь это мощный инструмент для создания динамичных и адаптивных прокручиваемых областей в приложениях Flutter. В этом цикле статей рассмотрим все существующие sliver-виджеты во Flutter, чтобы познакомиться с каждым из них, понять, какие задачи они решают, и как их можно применять. Мы не будем углубляться в детали, дабы не усложнять материал, а обозначим основные особенности и отличия каждого сливера, чтобы понимать, какие вообще существуют и в нужный момент воспользоваться ими. Итак, погнали!

Тест на Flutter-разработчика: думскроллинг или sliver?

Для начала немного общей информации о скролле.

ScrollView — виджет, который объединяет Scrollable и Viewport для создания интерактивной области прокрутки содержимого.
Scrollable — виджет, который с помощью распознавания жестов, управляет прокруткой и информирует Viewport.
Viewport — виджет, с помощью которого можно просматривать часть более крупного содержимого. Дочерние объекты для Viewport — Slivers.
Эта компания находится под капотом у всех прокручиваемых виджетов, в том числе и у классического ListView. Рассмотрим все виды сливеров, а начнем как раз со списков.

SliverList

SliverList — размещает множество элементов в линейном массиве вдоль главной оси, то есть отображает список элементов.

SliverList(
    delegate: SliverChildListDelegate(items),
),

Несколько сливеров, которые делают то же самое, что и SliverList, но с нюансом:

SliverFixedExtentList — отличается тем, что размер дочерних элементов по главной оси равен заданному значению.

SliverFixedExtentList(
  itemExtent: 100.0,
  delegate: SliverChildListDelegate(items),
),

SliverPrototypeExtentList — тут размер по главной оси уже задается виджетом-прототипом, удобно, когда высота элементов может меняться в зависимости от контента, но при этом остается одинаковой для всех элементов.

SliverPrototypeExtentList(
  prototypeItem: someWidget,
  delegate: SliverChildListDelegate(items),
),

SliverVariedExtentList

SliverVariedExtentList — а тут размер определяется по правилу, возвращаемому полем itemExtentBuilder. Сливер более эффективен, чем SliverList, потому что не нужно размещать дочерние элементы, чтобы получить их протяженность вдоль главной оси и более гибкий, чем SliverFixedExtentList (или SliverPrototypeExtentList), потому что позволяет дочерним элементам иметь разные размеры. SliverLayoutDimensions — объект, предоставляющий информацию о текущих размерах видимой области, в которой находится SliverVariedExtentList.

SliverVariedExtentList(
  itemExtentBuilder: (int index, SliverLayoutDimensions dimensions) {
    return (index + 1) * 3 + 40;
  },
  delegate: SliverChildListDelegate(items),
),

SliverReorderableList

SliverReorderableList — список, который позволяет пользователю интерактивно изменять порядок элементов, обычный ReorderableList использует именно этот сливер под капотом.

SliverReorderableList(
  itemBuilder: (context, index) {
    return ListTile(items[index]);
  },
  itemCount: items.length,
  onReorder: (oldIndex, newIndex) {
    setState(() {
      if (newIndex > oldIndex) {
        newIndex -= 1;
      }
      final item = items.removeAt(oldIndex);
      items.insert(newIndex, item);
    });
  },
),

SliverAnimatedList

SliverAnimatedList — SliverList, который анимирует элементы при их вставке или удалении. Для вставки или удаления элементов используется SliverAnimatedListState, чтобы к нему обратиться, либо укажите GlobalKey, либо используйте статический метод SliverAnimatedList.of.

final GlobalKey<SliverAnimatedListState> _listKey = GlobalKey<SliverAnimatedListState>();
...
SliverAnimatedList(
  key: _listKey,
  initialItemCount: items.length,
  itemBuilder: (context, index, animation) {
    return ListTile(items[index], animation);
  },
),

SliverFillViewport

SliverFillViewport — немного выбивается от предыдущих сливеров, нет в названии слова List, однако в остальном очень похож, также получает делегат, предоставляющий дочерние элементы. Главная особенность — делает каждый элемент заполняющим область просмотра, степень заполнения можно регулировать параметром viewportFraction.

SliverFillViewport(
  delegate: SliverChildListDelegate(items),
),

SliverGrid

SliverGrid — размещает дочерние элементы в двумерной компоновке. GridView реализован с помощью этого сливера.

SliverGrid(
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
  ),
  delegate: SliverChildListDelegate(items),
),

SliverAnimatedGrid

SliverAnimatedGrid — SliverGrid, который анимирует элементы при их вставке или удалении. Тут также, как и в случае SliverAnimatedList, для вставки и удаления используем SliverAnimatedGridState (через GlobalKey или SliverAnimatedGrid.of).

final GlobalKey<SliverAnimatedGridState> _gridKey = GlobalKey<SliverAnimatedGridState>();
...
SliverAnimatedGrid(
  key: _gridKey,
  initialItemCount: items.length,
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
  ),
  itemBuilder: (context, index, animation) {
    return GridTile(items[index], animation);
  },
),

На этом всё, в следующей статье продолжим тему списков и поговорим об их делегатах. Пишите в комментариях, какими sliver-виджетами из перечисленных пользуетесь.

Такие разные Slivers: обзор и применение во Flutter. Часть 1