flutter_speed_dial_material_design

Visão geral do pacote

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

Um plugin do Flutter que implementa o Speed Dial do Material Design, um botão flutuante de ação com opções de menu expansíveis. Ele segue as diretrizes do Material Design para transições e interações, permitindo que os usuários acessem várias ações a partir de um único FAB. O pacote suporta ícones, rótulos e estilos de animação personalizáveis, tornando-o ideal para melhorar a eficiência da interface do usuário em aplicativos móveis. Integra-se perfeitamente em projetos existentes do Flutter com configuração mínima.

Casos de uso

Adicionando menus de ação de acesso rápido em aplicativos móveis
Melhorando a navegação em interfaces orientadas por tarefas
Melhorando a consistência da interface com os padrões do Material Design
Criando botões flutuantes compactos, mas com muitos recursos
Simplificando o acesso a ações secundárias em um layout limpo

Principais recursos

animações compatíveis com o Material Design
Itens de menu e ícones personalizáveis
Suporte para rótulos e dicas de ferramentas
Integração fácil com widgets existentes do Flutter
Direção e velocidade de expansão configuráveis

Indicado para

Desenvolvedores de aplicativos com Design Material
aplicações voltadas para a interface do usuário que exigem acesso rápido às ações
Projetos com foco em interfaces modernas e polidas
Desenvolvedores de aplicativos móveis procurando componentes FAB reutilizáveis
Equipes que seguem as diretrizes de design do Google

Considerações

Personalização limitada por plataforma
Pode exigir estilos adicionais para temas não-Material
Não otimizado para conjuntos de menus muito grandes
O desempenho da animação pode variar em dispositivos mais antigos
Sem suporte embutido para navegação com teclado

README original

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

Flutter Speed dial of Material Design style

Flutter package which applies Material design Speed dial

Preview

There are several packages that provide fancy speed dial. However, as most of those do not work properly on docked FAB using notch, I referenced Andrea Bizzoto and Matt Carroll's idea/code specified here to make it work fine with notch as well. Truly appreciate to Andrea and Matt for sharing such an awesome idea and codes.

Usage

Basic usage

Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(child: _buildBody()),
      floatingActionButton: _buildFloatingActionButton(),
      floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
      bottomNavigationBar: _buildBottomBar(),
    );
  }

Widget _buildFloatingActionButton() {
    final icons = [
      SpeedDialAction(child: Icon(Icons.mode_edit)),
      SpeedDialAction(child: Icon(Icons.date_range)),
      SpeedDialAction(child: Icon(Icons.list)),
    ];

    return SpeedDialFloatingActionButton(
      actions: icons,
      // Make sure one of child widget has Key value to have fade transition if widgets are same type.
      childOnFold: Icon(Icons.event_note, Key: UniqueKey()),
      childOnUnfold: Icon(Icons.add),
      useRotateAnimation: true,
      onAction: _onSpeedDialAction,
    );
  }
  
_onSpeedDialAction(int selectedActionIndex) {
  print('$selectedActionIndex Selected');
}

Using controller

SpeedDialController _controller = SpeedDialController();

SpeedDialFloatingActionButton(
      controller: _controller,
      ...
    );
    
// Use anywhere to mannually unfold
_controller.unfold();

Fade Transition animation between child widgets

In order to apply fade transition between [childOnFold] and [childOnUnfold], make sure one of those has Key field. (eg. ValueKey(value) or UniqueKey()). As we using AnimatedSwitcher for transition animation, no key with same type of child will perform no animation. It is AnimatedSwitcher's behaviour.

TO-DOs

[ ] Ability to display/hide speed dial when it is needed. (ex. hiding on scroll)
[X] Unfold function to force close the dial
[ ] Providing option for modal background with color parameter
[X] Text labels on each action widgets (Thanks to @CarlosHJuniior)

Contributing

Any pull requests for implementing To-Do functions are always welcome!

Other useful packages you might be instrested

Firebase Auth Simplify Google Maps Place Picker

Support

If the package was useful or saved your time, please do not hesitate to buy me a cup of coffee! ;)
The more caffeine I get, the more useful projects I can make in the future.

Buscar pacotes, repositórios e categorias de apps

Instalar pacote