flutter_speed_dial 4.0.0-dev.1

Flutter plugin to implement a beautiful and dynamic Material Design Speed Dial with labels, animated icons, multi-directional children and much more.

Flutter Speed Dial - Ultimate Edition

Flutter package to render a Material Design Speed Dial.

Usage

The SpeedDial widget is built to be placed in the Scaffold.floatingActionButton argument, replacing the FloatingActionButton widget. You can set its position using Scaffold.floatingActionButtonLocation argument. It can also be used with Scaffold.bottomNavigationBar and Snackbar.

Nullsafety is availabile from version 3.0.5 ( It is also backward compatible, meaning you can use it with not null safe code too )

Labels

SpeedDial can take any Widget as label SpeedDial will use Extended FloatingActionButton property if label is specified. It also have activeLabel property by which you can specify the label which is shown when SpeedDial is open. It also comes with its labelTransitionBuilder which defaults to fade transition.

Also Every children's button have label property which accepts String which can be styled by using labelStyle. If you want to specify a widget then you can use labelWidget. If the label parameter is not provided the label will be not rendered.

Types of child for SpeedDial (Ordered by their priority)

Animated Icon using animatedIcon property

SpeedDial's AnimatedIcon has two specific parameters:

• animatedIcon takes an AnimatedIconData widget
• animatedIconTheme takes IconThemeData

Widget using child & activeChild property

SpeedDial's Widget has two specific parameters:

• child takes a widget and is the default placeholder if dial is not open.
• activeChild takes a widget and is the child's Widget which is used when dial is open, not required.

IconData using icon & activeIcon property

SpeedDial's IconData has three specific parameters:

• icon takes a IconData and is the default placeholder if dial is not open.
• activeIcon takes a IconData and is the child's IconData which is used when dial is open, not required.
• iconTheme takes its IconThemeData which includes color and size.

The package will handle the animation by itself.

Close on WillPop

Although it doesn't magically closes when you press back button, but requires a easier setup to enable this functionality, here are the steps that you need to do to enable that:

1. Add a value Notifier inside your widgets build context where your speedDial is placed like below.

ValueNotifier<bool> isDialOpen = ValueNotifier(false);

2. Then you need to add a property to your speedDial known as openCloseManually like below.

  openCloseDial: isDialOpen,

3. Add a will Pop in your body or anywhere where you want and then simply add the following line in its onWillPop element.

WillPopScope(
  onWillPop: () async {
    if (isDialOpen.value) {
      isDialOpen.value = false;
      return false;
    }
    ...other checks here
  }
  child: ...your child goes here
)

Classes API Docs

Example Usage

See Example Code for more info.

Issues & Feedback

Please file an issue to send feedback or report a bug,
If you want to ask a question or suggest an idea then you can open an discussion.
Thank you!

Contributing

Every pull request is welcome.