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

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

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

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-виджетами из перечисленных пользуетесь.