circular_clip_route

Visão geral do pacote

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

CircularClipRoute é um pacote Flutter que permite transições de página suaves e animadas revelando uma nova tela por meio de um recorte circular em expansão a partir de um widget âncora especificado. Isso cria um efeito visual envolvente semelhante a uma onda ou animação de zoom, melhorando a experiência do usuário na navegação. É ideal para aplicativos onde transições sutis e dinâmicas melhoram o fluxo da interface e o apelo visual. A rota funciona em todas as principais plataformas, incluindo Android, iOS, Web, macOS, Windows e Linux, garantindo comportamento consistente. Desenvolvido com Dart, integra-se perfeitamente em projetos Flutter existentes.

Casos de uso

Telas de onboarding animadas
Navegação interativa entre páginas
Feedback visual durante mudanças de estado
Melhorando experiências de inicialização de aplicativos
Criando telas de inicialização envolventes

Principais recursos

animação de expansão circular
widget de âncora personalizável
Compatibilidade multiplataforma
Efeitos de transição suave
Integração fácil com Navigator

Indicado para

Desenvolvedores de aplicativos em busca de transições envolventes
Designers focados em microinterações
Projetos com elementos de interface interativos
Aplicações móveis e web
Aplicativos com foco em narrativa visual

Considerações

Pode afetar o desempenho em dispositivos de baixa gama
Requer posicionamento cuidadoso do widget âncora
Não adequado para navegações simples e rápidas
Personalização limitada além dos parâmetros básicos
Melhor usado com moderação para evitar distrações

README original

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

A page route, which reveals its page by expanding a circular clip from an anchor widget.

If you're looking for a database solution, check out cbl, another project of mine. It brings Couchbase Lite to standalone Dart and Flutter, with support for:

Full-Text Search,
Expressive Queries,
Data Sync,
Change Notifications

and more.

Getting started

To use the CircularClipRoute, provide it the context from which the animation should expand and push it onto the navigation stack. One way to get the right context is to use a Builder, which wraps the widget from which the route should expand:

final navigationTrigger = Builder(
    builder: (context) {
      return IconButton(
          icon: Icon(Icons.favorite),
          onPressed: () {
            Navigator.push(context, CircularClipRoute<void>(
              // This context will be used to determine the location and size of
              // the expanding clip. Here this will resolve to the `IconButton`.
              expandFrom: context,
              builder: (_) => MyRoute(),
            ));
          }
      );
    }
);

Also, take a look at the API docs for customizing the animation.

Example

The example implements the demo at the top.

References

Inspired by this shot.

This drawing visualizes the geometry involved in creating the route transition:

Illustration of the geometry of the transition

The Anchored Custom Routes article explains how to implement routes, that are anchored to a widget, generally.

Gabriel Terwesten • GitHub @blaugold • Twitter @GTerwesten • Medium @gabriel.terwesten

Buscar pacotes, repositórios e categorias de apps

Instalar pacote