Buscar pacotes, repositórios e categorias de apps

Capa de animated_stack
Detalhes do pacotev0.3.3

animated_stack

Páginas empilhadas animadas personalizadas, para criar botões de menu lateral personalizáveis.

AndroidiOSWebmacOSWindowsLinux
Downloads em 30 dias
214
Curtidas
252
Pontos Pub
150

Instalar pacote

flutter pub add animated_stack

Visão geral do pacote

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

AnimatedStack é um pacote do Flutter que permite a criação de páginas empilhadas animadas personalizadas, ideal para projetar botões interativos de menu lateral com transições suaves. Oferece uma base flexível para construir interfaces de navegação dinâmicas, permitindo que desenvolvedores sobreponham widgets e animem sua visibilidade e posição. O pacote suporta múltiplas plataformas, incluindo Android, iOS, Web, macOS, Windows e Linux, tornando-o adequado para aplicações multiplataforma. Com opções intuitivas de configuração, melhora a experiência do usuário por meio de animações fluidas e design responsivo. Sua natureza leve garante desempenho eficiente em diversos dispositivos.

Casos de uso

  • Implementações de menu lateral personalizadas
  • Interfaces de navegação interativas
  • Transições de página animadas
  • Melhorias no botão de ação flutuante
  • Componentes de interface do usuário multiplataforma

Principais recursos

  • Empilhamento animado suave
  • Transições de página personalizáveis
  • Suporte multiplataforma
  • Leve e eficiente
  • Integração fácil com a interface existente
  • Empilhamento flexível de widgets

Indicado para

  • Desenvolvedores criando painéis de navegação personalizados
  • Designers de UI procurando interações animadas
  • Criadores de aplicativos multiplataforma
  • Aplicativos que exigem mudanças dinâmicas no layout
  • Equipes focadas em experiências de usuário refinadas

Considerações

  • Pode exigir estilos adicionais para layouts complexos
  • O desempenho depende da complexidade da animação
  • Documentação limitada além do uso básico
  • Não otimizado para pilhas extremamente grandes
  • Mais adequado para intensidade moderada de animação

README original

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

Animated Stack

Custom animated stacked pages, to create customisable side menu buttons. Providing simple menu for sharing buttons, side menu, message sending, about page, ... etc.

   

Getting Started

At first, you have to create Foreground and Background Widgets.

Here is a simple example to meet minimum requirements.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Stack Demo',
      theme: ThemeData(
        splashColor: Colors.transparent,
        highlightColor: Colors.transparent,
      ),
      home: AnimatedStack(
        backgroundColor: Colors.white,
        fabBackgroundColor: Colors.black,
        foregroundWidget: ..., // Main page
        columnWidget: ..., // Right widget, preferably Column
        bottomWidget: ...,// Right widget, preferably Row
      ),
    );
  }
}

Complete Features

Here's all what you can customize in this widget!

Stack attributes

AnimatedStack(
backgroundColor: ...,     // Background Container color
foregroundWidget: ...,    // Foreground Container color

columnWidget: ...,        // Right Widget, (use Column for best results)
bottomWidget: ...,        // Bottom Widget, (use Row for best results)

scaleHeight: 100,         // Sliding animation height, default is 60
scaleWidth: 100,          // Sliding animation width, default is 60


buttonIcon: ...,          // FAB icon (IconData)
fabIconColor: ...,        // FAB icon color
animateButton: false,     // Sometimes, we don't want to animate the button!
fabBackgroundColor: ...,  // FAB background color

slideAnimationDuration: ..., // Animation Duration, default is 800 Milliseconds
buttonAnimationDuration: ...,// Animation Duration, default is 240 Milliseconds

openAnimationCurve: ...,    // Animation Curve, default is ElasticOutCurve(0.9)
closeAnimationCurve: ...,   // Animation Curve, default is ElasticInCurve(0.9)
enableClickToDismiss: true, // Enable Click on Main Widget to close
preventForegroundInteractions: true, // Prevent Clicks on Main Widget
onForegroundCallback: () => print('on Close Callback'), // On Close Callback
);
For complete examples, check example folder

License

MIT License.

Categorias

Repositório-fonte

Projetos que usam este pacote