diffutil_sliverlist

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

Um widget SliverList que anima automaticamente mudanças de itens usando o algoritmo DiffUtil, garantindo atualizações suaves e eficientes quando a lista de dados subjacente muda. Ele utiliza diffutil.dart para calcular as diferenças mínimas entre listas antigas e novas, aplicando apenas animações e reconstruções necessárias. Ideal para grandes listas roláveis dinâmicas onde desempenho e fluidez visual são críticos. O pacote se integra perfeitamente à arquitetura Sliver do Flutter e é compatível com todas as principais plataformas.

Casos de uso

Listas dinâmicas roláveis com atualizações frequentes
Reordenamento eficiente de itens em uma visualização rolável
Transições suaves ao adicionar/remover itens da lista
Grandes conjuntos de dados que exigem renderização otimizada
Alimentações de dados em tempo real em interfaces roláveis

Principais recursos

Animação automática de mudanças na lista
Usa o DiffUtil para atualizações mínimas
Desempenho otimizado para listas grandes
Integração perfeita com widgets Sliver
Suporte multiplataforma para todos os alvos do Flutter

Indicado para

Desenvolvedores que precisam de animações suaves em listas
Aplicativos com dados em tempo real ou frequentemente alterados
Interfaces de rolagem sensíveis ao desempenho
Desenvolvedores Flutter usando layouts baseados em Sliver
Projetos que exigem mínimo boilerplate para diferenças de lista

Considerações

Requer compreensão do conceito de DiffUtil
Pode ter sobrecarga para listas muito pequenas
Personalização limitada do comportamento de animação
Depende do pacote externo diffutil.dart
Não adequado para tipos de fio não listados

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

A SliverList that implicitly animates changes.

It supports two use cases:

Animating changes from a list of widgets with unique keys

When you have a list of Widgets and can give each Widget a unique key, you can use DiffUtilSliverList.fromKeyedWidgetList.

See the example code:

class _ExpandableListsState extends State<ExpandableLists> {
  bool expanded = false;

  @override
  Widget build(BuildContext context) {
    return DiffUtilSliverList.fromKeyedWidgetList(
      children: [
        ListTile(
          key: Key("1"),
          title: Text("first"),
          trailing: Icon(Icons.chevron_right),
        ),
        ListTile(
          key: Key("2"),
          title: Text("second"),
          trailing: Icon(Icons.chevron_right),
        ),
        if (this.expanded)
          for (int i = 3; i < 6; i++)
            ListTile(
              key: Key(i.toString()),
              title: Text("index: $i"),
              trailing: Icon(Icons.chevron_right),
            ),
        ListTile(
          key: Key("expand_collapse"),
          onTap: () => setState(() {
            expaned = !expaned;
          }),
          title: Text(expanded ? "collapse" : "expand", style: TextStyle(fontWeight: FontWeight.bold),),
          trailing: Icon(expanded ? Icons.expand_less : Icons.expand_more),
        )
      ],
      insertAnimationBuilder: (context, animation, child) => FadeTransition(
        opacity: animation,
        child: child,
      ),
      removeAnimationBuilder: (context, animation, child) => FadeTransition(
        opacity: animation,
        child: SizeTransition(
          sizeFactor: animation,
          axisAlignment: 0,
          child: child,
        ),
      ),
    );
  }
}

And the result:

Building Widgets from a list of data objects that implement ==

Example:


Widget build(BuildContext context) {
    return CustomScrollView(
             slivers: [
               DiffUtilSliverList<int>(
                 items: list,
                 builder: (context, item) => 
                   Container(
                     color: colors[item % colors.length],
                     height: 48,
                     width: double.infinity,
                 ),
                 insertAnimationBuilder: (context, animation, child) =>
                     FadeTransition(
                       opacity: animation,
                       child: child,
                 ),
                 removeAnimationBuilder: (context, animation, child) =>
                     SizeTransition(
                       sizeFactor: animation,
                       child: child,
                 ),
                 removeAnimationDuration: const Duration(milliseconds: 3000),
                 insertAnimationDuration: const Duration(milliseconds: 1200),
             ),
           ],
         );
}

If list changes, the list will automatically animate new/removed items:

If the items don't implement == correctly, you can pass your own equalityChecker.

Buscar pacotes, repositórios e categorias de apps