flutter_speed_dial_material_design 2.0.0

Flutter Android iOS web

Flutter plugin to implement a Material Design Speed Dial (https://material.io/components/buttons-floating-action-button/#types-of-transitions)

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();

      controller: _controller,
// Use anywhere to mannually 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

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.

Buy Me A Coffee

pub points

Flutter plugin to implement a Material Design Speed Dial (https://material.io/components/buttons-floating-action-button/#types-of-transitions)

Repository (GitHub)
View/report issues


API reference








Packages that depend on flutter_speed_dial_material_design