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

Сегодня поговорим о Pull to Refresh — популярном механизме в интерфейсах мобильных приложений, который позволяет одним жестом обновить информацию на экране.

Для пользователя это простое и понятное движение — содержимое экрана нужно потянуть сверху вниз и отпустить. В момент, когда Pull to Refresh срабатывает, пользователю показывается индикатор загрузки. Как только новые данные получены, содержимое экрана меняется, а индикатор загрузки исчезает.

Этот механизм считается неким «золотым стандартом», почти каждое коммерческое приложение не обходится без него. Почему?

▫️ Жест понятен. Пользователи уже настолько привыкли к такому поведению, что их не нужно дополнительно обучать

▫️ Процесс обновления прозрачен и нагляден. Красивые анимации, индикатор загрузки, плавные жесты — все это дает пользователю ощущение полного контроля и не вызывает вопросов

▫️ Механизм дает пользователю обновлять данные, когда он сам захочет. Это повышает его доверие и лояльность к продукту

▫️ Механизм стал настолько распространенным, что его реализация не вызывает проблем на всех платформах

Как реализовать Pull to Refresh во Flutter-приложении?

▪️Базовый виджет RefreshIndicator
Это самый простой способ. Для реализации достаточно прокручиваемый виджет на экране обернуть в RefreshIndicator, а затем добавить вызов onRefresh.

RefreshIndicator(
  onRefresh: () async {
    // обновить данные тут
  },
  child: ListView.builder(
    itemCount: items.length,
    itemBuilder: (context, index) => ChildWidget(),
  ),
)

Готово! Такая реализация легко поддерживается и является стабильной.

Но тут важно учесть, что RefreshIndicator не позволит вам особенным образом кастомизировать индикатор загрузки — это всегда будет CircularProgressIndicator, который можно лишь немного видоизменить.

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

▪️Библиотека pull_to_refresh
Если возможностей RefreshIndicator окажется недостачно, на помощь придет SmartRefresher из библиотеки pull_to_refresh.

Этот виджет позволит не только обработать жест перезагрузки (сверху вниз), но и жест дозагрузки (снизу вверх). Можно реализовать механизм по горизонтали с помощью scrollDirection.

SmartRefresher(
  enablePullDown: true, // включает жест сверзу вниз
  enablePullUp: true, // включает жест снизу вверх
  scrollDirection: Axis.vertica l// указывает направление жестов
  onRefresh: _onRefresh, // обработка обновления
  controller: _refreshController,
  child: ListView(...),
);

SmartRefresher удобен тем, что его индикатор загрузки можно кастомизировать. Пакет уже дает готовые решения, например, WaterDropHeader. С помощью CustomHeader и CustomFooter вы можете настроить вид под свои нужды.

▪️Полноценная кастомная реализация.
Если оба решения вам не подходят, и вам требуется совершенно нестандартный вид — поможет самописное решение.

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

Делитесь своим опытом в комментариях😘