Buscar pacotes, repositórios e categorias de apps

ducafecatGuia do ecossistema Flutter
Capa de draggable_expandable_fab
Detalhes do pacotev1.0.0

draggable_expandable_fab

Este pacote Flutter fornece um botão flutuante expansível e arrastável com animação.

AndroidiOSWebmacOSWindowsLinux
pub.dev Documentação da API Código-fonte
Downloads em 30 dias
96
Curtidas
27
Pontos Pub
150

Instalar pacote

flutter pub add draggable_expandable_fab

Visão geral do pacote

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

O pacote draggable_expandable_fab aprimora aplicativos Flutter com um botão flutuante de ação que pode se expandir em várias ações e ser arrastado para qualquer lugar da tela. Ele apresenta animações suaves tanto para expansão quanto para movimentação, oferecendo uma experiência do usuário interativa e visualmente envolvente. Ideal para aplicativos que precisam de acesso rápido a múltiplas funções a partir de um único botão, ele é compatível com todas as principais plataformas, incluindo móvel, web e desktop. O botão mantém resposta rápida e movimento fluido, tornando-o adequado para interfaces modernas baseadas em gestos.

Casos de uso

  • Acesso rápido a várias ações
  • Navegação baseada em gestos
  • Elementos de interface do usuário interativos
  • Melhorias para aplicativos móveis e de desktop
  • menus de ação personalizáveis
  • Aumento do engajamento do usuário

Principais recursos

  • Botão flutuante arrastável
  • Menu de ação expansível
  • Transições de animação suaves
  • Suporte multiplataforma
  • Layout personalizável
  • Manipulação de toque responsiva

Indicado para

  • Desenvolvedores de aplicativos procurando FABs interativos
  • Designers que desejam componentes de interface dinâmicos
  • Projetos que exigem interfaces ricas em gestos
  • Barra de ferramentas de múltiplas ações em aplicativos móveis
  • Interfaces de aplicativos modernas e animadas

Considerações

  • Pode afetar o desempenho em dispositivos de baixa gama
  • Requer posicionamento cuidadoso para evitar sobreposição
  • Personalização limitada além da estilização básica
  • Não é ideal para casos de uso simples com ação única
  • Necessita de testes em todas as plataformas-alvo

README original

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

Expandable Draggable Fab

This Flutter package provides a Expandable and Draggable Floating Button with animation.

💻 Installation

In the dependencies: section of your pubspec.yaml, add the following line:

dependencies:
  draggable_expandable_fab: <latest version>

To use the latest changes:

  draggable_expandable_fab:
    git:
      url: https://github.com/Tughra/draggable_expandable_fab.git
      ref: master

❔ Usage

Import this class

import 'package:draggable_expandable_fab/draggable_expandable_fab.dart';

Replace Scaffold's parameters with these to better usage.

      floatingActionButtonAnimator: NoScalingAnimation(),
      floatingActionButtonLocation: ExpandableFloatLocation(),

Simple Implementation

Scaffold(
      floatingActionButtonAnimator: NoScalingAnimation(),
      floatingActionButtonLocation: ExpandableFloatLocation(),
      floatingActionButton: ExpandableDraggableFab(childrenCount: 3,
      distance: 100,// Animatiion distance during open and close. 
      children: [
        FloatingActionButton(onPressed: (){}),
        FloatingActionButton(onPressed: (){}),
        FloatingActionButton(onPressed: (){}),
      ],),
      body: Container(),
    );

Full Implementation

   final Size _size = MediaQuery.of(context).size;
    return Scaffold(
      floatingActionButtonAnimator: NoScalingAnimation(),
      floatingActionButtonLocation: ExpandableFloatLocation(),
      floatingActionButton: ExpandableDraggableFab(childrenCount: 3,
        onTab: (){
        debugPrint("Tab");
        },
        childrenTransition: ChildrenTransition.fadeTransation,
        initialOpen: false,
        childrenBoxDecoration: const BoxDecoration(color: Colors.red),
        enableChildrenAnimation: true,
        curveAnimation: Curves.linear,
        reverseAnimation: Curves.linear,
        childrenType: ChildrenType.columnChildren,
        closeChildrenRotate: false,
        childrenAlignment: Alignment.topRight,
        initialDraggableOffset: Offset(_size.width-90,_size.height-100),
      distance: 100,// Animation distance during open and close.
      children: [
        FloatingActionButton(onPressed: (){}),
        FloatingActionButton(onPressed: (){}),
        FloatingActionButton(onPressed: (){}),
      ],),
      body: Container(),
    );

Categorias

Botão de Ação Flutuante

Repositório-fonte

Projetos que usam este pacote

Ainda não há dados.