Hola, Amigos! Продолжаем разбираться с пагинацией. Сегодня рассмотрим, как подключить логику работы к пользовательскому интерфейсу.

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

В бесконечном списке страницы грузятся в момент, когда пользователь практически доходит до конца. Для этого нам понадобится ScrollController, который мы подцепляем к виджету списка, это может быть ListView.builder или ListView.separated. Далее нужно добавить прослушку:

_scrollController.addListener(() {
  final currentScroll = _scrollController.position.pixels;
  final maxScroll = _scrollController.position.maxScrollExtent;

  if (currentScroll >= (maxScroll - 200) && !isLoading) {
    … // Вызов функции для подгрузки
  }
});

Тут мы получаем текущее и максимальное положение скролла и сравниваем их. Совет - не нужно дожидаться, пока пользователь дойдет до самого конца списка, лучше начинать грузить пораньше, например, когда до максимума осталось 200 пикселей. Тут все зависит от высоты элементов списка и их количества на экране.

Следующий момент - виджет загрузки первой страницы. Каким он будет, зависит от вас. Часто используют CircularProgressIndicator или какой-либо скелет, например, с Shimmer эффектом. Показываем мы его, если находимся в состоянии загрузки данных и у нас пока нет элементов списка:

if (isLoading && items.isEmpty) {
  return …
}

И в самом конце, нужно сделать отображение загрузки новой страницы. Для этого мы манипулируем количеством элементов в списке и его последним элементом:

ListView.builder(
  conroller: _scrollController,
  …
  itemCount: items.length + (isLoading && !isLastPage ? 1 : 0),
  itemBuilder: (context, index) {
    if (index < items.length) {
      return … // Ваш элемент списка
    }

    return … // Ваш индикатор загрузки
  },
);

Как и в случае с первоначальной загрузкой, вы можете выбрать то, что вам удобно и подходит.

Делитесь в комментариях, а каким виджетом вы показываете состояние загрузки на ваших проектах?