flutter_speed_dial_material_design 1.0.5 copy "flutter_speed_dial_material_design: ^1.0.5" to clipboard
flutter_speed_dial_material_design: ^1.0.5 copied to clipboard

outdated

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.

Useage #

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');
}

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)
  • Unfold function to force close the dial
  • Providing option for modal background with color parameter
  • Text labels on each action widgets

Contributing #

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

62
likes
0
pub points
35%
popularity

Publisher

unverified uploader

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

License

unknown (LICENSE)

Dependencies

flutter

More

Packages that depend on flutter_speed_dial_material_design