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 { ... },
);