Implementando Pull-to-Refresh e Infinite Scroll no Flutter com flutter_easyrefresh

O flutter_easyrefresh facilita a implementação de comportamentos de rolagem para carregamento de dados em qualquer widget baseado em ScrollView. Ele oferece uma variedade de animações pré-construídas para cabeçalhos e rodapés, além de permitir uma customização profunda aproveitando o sistema de animação do Flutter. O pacote suporta tento efeitos visuais de aura no Android quanto o efeito de borda elástica (bounce) no iOS, garantindo uma experiência nativa em ambas as plataformas.

Principais Recursos

  • Suporte a efeitos visuais específicos de plataforma (aura no Android, borda elástica no iOS).
  • Compatível com qualquer widget que herde de ScrollView, permitindo a encapsulação de componentes complexos.
  • Personalização flexível de cabeçalhos (Header) e rodapés (Footer), com diversas animações integradas.
  • Atualização e carregamento automático ou manual de dados.
  • Suporte a estilos flutuantes ou embutidos na lista para indicadores de carregamento.

Instalação e Configuração

Para adicionar o pacote ao seu projeto, inclua a dependência no arquivo pubspec.yaml:

dependencies:
  flutter_easyrefresh: ^2.2.1 # Utilize a versão mais recente disponível

Em seguida, implemente o widget EasyRefresh envolvendo sua lista:

import 'package:flutter/material.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';

class RefreshExample extends StatelessWidget {
  final GlobalKey<EasyRefreshState> refreshKey = GlobalKey<EasyRefreshState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Exemplo EasyRefresh')),
      body: EasyRefresh(
        key: refreshKey,
        child: ListView.builder(
          itemCount: 20,
          itemBuilder: (ctx, index) => ListTile(
            title: Text('Item $index'),
          ),
        ),
        onRefresh: () async {
          // Lógica executada ao puxar para baixo
        },
        loadMore: () async {
          // Lógica executada ao chegar ao final da lista
        },
      ),
    );
  }
}

Disparando Ações Programaticamente

Para acionar a atualização ou o carregamento de dados via código, utilize a chave global instanciada anteriormente:

refreshKey.currentState?.callRefresh();
refreshKey.currentState?.callLoadMore();

Cusotmização de Cabeçalho e Rodapé

Para aplicar estilos específicos de carregamento, configure os parâmetros refreshHeader e refreshFooter. É necessário fornecer chaves globais dedicadas para manter o sincronismo do estado interno do widget com a interface do usuário:

final GlobalKey<RefreshHeaderState> headerKey = GlobalKey<RefreshHeaderState>();
final GlobalKey<RefreshFooterState> footerKey = GlobalKey<RefreshFooterState>();

EasyRefresh(
  refreshHeader: MaterialHeader(key: headerKey),
  refreshFooter: MaterialFooter(key: footerKey),
  child: ListView.builder(...),
  onRefresh: () async { ... },
  loadMore: () async { ... },
);

Tags: Flutter Dart flutter_easyrefresh Pull-to-Refresh infinite-scroll

Publicado em 7-9 02:58