fluid_dialog

Visão geral do pacote

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

Fluid Dialog é um pacote Flutter que permite diálogos dinâmicos e animados capazes de alternar entre múltiplas telas de conteúdo. Ele ajusta automaticamente seu tamanho e alinhamento com base no conteúdo atual, proporcionando uma experiência do usuário suave e responsiva em diferentes plataformas. Ideal para modais que precisam adaptar seu layout sem mudanças abruptas, ele melhora a fluidez da interface em aplicativos que exigem comportamento flexível de diálogos. O pacote oferece suporte a todas as principais plataformas, incluindo Android, iOS, Web, macOS, Windows e Linux.

Casos de uso

Mudança dinâmica de conteúdo em modais
Tamanho responsivo de diálogo
Transições suaves entre estados de tela
Interfaces de usuário adaptativas para formulários de múltiplos passos
Ajuda interativa ou diálogos de tutorial
Consistência de diálogo multiplataforma

Principais recursos

Animação automática de tamanho e alinhamento
Suporte a múltiplos conteúdos
Compatibilidade multiplataforma
Transições suaves entre estados
animações personalizáveis
Leve e fácil integração

Indicado para

Desenvolvedores construindo diálogos interativos
Aplicativos com fluxos de usuário de múltiplos passos
Aplicações com foco em UI que precisam de transições fluidas
Projetos Flutter multiplataforma
Sistemas de design que exigem modais adaptativos

Considerações

Pode afetar o desempenho com conteúdo aninhado complexo
Requer gerenciamento cuidadoso de estado para alternância de conteúdo
O tempo de animação pode precisar de ajustes para casos de uso específicos
Personalização limitada para layouts não padrão
Mais adequado para estruturas de diálogo simples a moderadamente complexas

README original

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

cover

Fluid Dialog

A dialog that can switch between multiple contents and animates size and alignment dynamically.

Video Demo

Features 🎉

Navigate between different pages
Animated size and alignment
Fully customizable

Usage 🧪

To show a FluidDialog you typically use Flutter's showDialog function. You can also use your implementation to show the dialog.

Here's an example:

showDialog(
 context: context,
 builder: (context) => FluidDialog(
  // Set the first page of the dialog.
  rootPage: FluidDialogPage(
    alignment: Alignment.bottomLeft, //Aligns the dialog to the bottom left.
    builder: (context) => const TestDialog(), // This can be any widget.
  ),
 ),
);

To navigate in the dialog, use the DialogNavigator. It works similarly to the flutter navigator.

This only works for widgets in the FluidDialog

TextButton(
  onPressed: () => DialogNavigator.of(context).push(
    FluidDialogPage(
      builder: (context) => const SecondDialogPage(),
    ),
  ),
  child: const Text('Go to next page'),
),

Take a look at the example or demo for more code.

Buscar pacotes, repositórios e categorias de apps

Instalar pacote