👋Всем привет! С вами Анна, Friflex Flutter Team Lead.

Однажды Роза в своем посте уже делилась лайфхаками, как сделать скролящиеся списки красивыми, плавными и высокопроизводительными. Там же упоминались три основных виджета для реализации списков с прокруткой — SingleChildScrollView, ListView и CustomScrollView. Сегодня чуть глубже погрузимся в специфику работы каждого из них.

✔️SingleChildScrollView — самый простой виджет для прокрутки. Принимает в качестве «ребенка» только один виджет, поэтому при необходимости вложить несколько объектов необходимо обернуть их в Column.



SingleChildScrollView(
  child: Column(
    children: [
      Child1()
      Child2()
      Child3()
    ],
  ),
)



Плюсы:
▪️максимально прост в использовании
▪️ отлично подходит для отрисовки статичных объектов

Минусы:
➖ отрисовывает одномоментно абсолютно все содержимое списка, за счет чего страдает производительность
➖ использует много памяти

✔️ListView — наиболее часто используемый виджет для скроллящихся списков. Имеет несколько конструкторов builder, separated и custom, каждый из которых в разных ситуациях может помочь максимально сократить количество кода.



ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return Child();
},
)

ListView(
children: [
Child1(),
Child2(),
],
)



Плюсы:
▪️ поддерживает высокую производительность
▪️ работает по принципу ленивой загрузки (вложенные виджеты билдятся не одновременно, а по мере прокрутки)

Минусы:
➖ позволяет вложить простой контент
➖ не дает сильно кастомизировать прокрутку

✔️CustomScrollView — идеальное решение для сложных интерфейсов. Работает не на стандартных виджетах, а на сливерах, что без проблем позволяет вкладывать разнообразный контент.



CustomScrollView(
slivers: [
SliverAppBar(
title: Child1(),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => Child2(),
childCount: 20,
),
),
SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
delegate: SliverChildBuilderDelegate(
(context, index) => Child3(),
childCount: 10,
),
),
],
)



Плюсы:
▪️ обеспечивает высокую производительность даже при сложном и разнообразном наполнении
▪️ поддерживает наибольшую возможность кастомизации
▪️ дает возможность добавлять дополнительные интересные эффекты в прокрутку
▪️ поддерживает ленивую загрузку контента

Минусы:
➖ имеет нестандартную для других виджетов скроллящихся списков механику, что требует от разработчика дополнительного изучения
➖ работает на сливерах, что так же может вызывать трудности у начинающих специалистов

Каждый из вариантов имеет место быть. Например, для простого короткого списка статичных контейнеров нет смысла создавать CustomScrollView, так как с этой целью прекрасно справится SingleChildScrollView. А при необходимости добавить на экран несколько сеток и вложенных списков со сложной анимацией оптимальным будет именно CustomScrollView. Здесь важно понимать различия и с умом подходить к выбору инструмента.