Speed Dial - Float Action Button

Pub Version

A customizable Speed Dial FAB widget for Flutter, including vertical, horizontal, and radial/carousel layouts.

Radial glass speed dial

Radial glass speed dial animation

Please note: Most of the support on debugging new issues relies on the open source community.

Usage

To use speed_dial_fab, import the speed_dial_fab module and use the speed_dial_fab Widget. More usage examples can be seen under the examples/ folder.

Radial glass example

SpeedDialFabWidget(
  layout: SpeedDialLayout.radial,
  radialRadius: 112,
  glassEffect: true,
  glassOpacity: 0.22,
  secondaryIconsList: const [Icons.copy, Icons.share, Icons.delete],
  secondaryIconsOnPress: [copyItem, shareItem, deleteItem],
)

The default radial arc travels toward the upper-left, so it stays visible when the widget is placed in a bottom-right Scaffold.floatingActionButton slot.

Here is the Primary and Secondary FAB reference:

Props

primaryBackgroundColor

Change the background color of the primary FAB button.

propType: Color

default: Colors.white

primaryForegroundColor

Change the foregroundColor of the primary FAB button.

propType: Color

default: Colors.black

secondaryBackgroundColor

Change the background color of the secondary FAB buttons.

propType: Color

default: Colors.white

secondaryForegroundColor

Change the foreground color of the secondary FAB buttons.

propType: Color

default: Colors.black

secondaryIconsList

Change the icons of the secondary FAB buttons.

propType: List[IconData]

REQUIRED!

secondaryIconsOnPress

An array of function that will be called when secondary button is clicked

propType: List[Function]

REQUIRED!

secondaryIconsText

Change the text of the icon for the secondary FAB buttons, the little ones that expand and colapse from the main FAB.

propType: List[String]

default: null (No tooltip)

primaryIconExpand

Change the icon for the principal FAB when the secondary FABs aren't visible. Expand secondary FABS.

propType: IconData

default: Icons.expand_less

primaryIconCollapse

Change the icon for the principal FAB when the secondary FABs are visible. Close/Collapse secondary FABS.

propType: IconData

default: Icons.expand_less

primaryElevation Change the elevation of the primary FAB button.

propType: double

default: 10.0

secondaryElevation Change the elevation of the secondary FAB button.

propType: double

default: 10.0

rotateAngle

Change the animation icon for the principal FAB, when is clicked.

propType: double

default: 'math.pi (180°)

animationDuration

Sets the duration of the expand and collapse animations.

propType: Duration

default: Duration(milliseconds: 500)

direction

Sets where the secondary FABs expand. Use SpeedDialDirection.left or SpeedDialDirection.right for a horizontal arrangement.

propType: SpeedDialDirection

default: SpeedDialDirection.up

layout

Choose SpeedDialLayout.vertical, SpeedDialLayout.horizontal, or SpeedDialLayout.radial. Radial mode places actions on an arc around the primary FAB. Its defaults fan toward the upper-left, which is safe for a FAB anchored at the bottom-right of a screen.

radialRadius, radialStartAngle, radialSweepAngle

Customize the radial orbit in logical pixels and radians. Adjust the start and sweep angles when the FAB is anchored to another screen corner.

glassEffect

Uses BackdropFilter to create a translucent glass surface for primary and secondary actions. This is supported on iOS and other Flutter platforms. Use glassColor, glassOpacity, and glassBlurSigma to customize it.

blurBackground

Blurs the screen behind the speed dial while its secondary actions are shown. Use blurBackgroundSigma to control blur strength.

propType: bool

default: false

Stateful functions

forceExpandSecondaryFab

Force animation of expand the secondary fab. Note: This can mess the animation, so use it wisely.

forceCollapseSecondaryFab

Force animation of collapse the secondary fab. Note: This can mess the animation, so use it wisely.

Please open an issue if something doesn't work or is not clear enough.

Releasing

Releases use pub.dev's GitHub Actions OpenID Connect publishing. Enable automated publishing in the package Admin settings with repository lcsvcn/speed_dial_fab and tag pattern v{{version}}.

To prepare a release locally, install and run pub_release:

dart pub global activate pub_release
pub_release --dry-run --setVersion=2.5.0 --autoAnswer
# After reviewing the dry-run, update pubspec.yaml and CHANGELOG.md,
# then push the matching tag:
git tag v2.5.0
git push origin main v2.5.0

Pushing the matching v2.5.0 tag triggers the trusted pub.dev publisher; no PUB_DEV_TOKEN or long-lived publishing secret is required.

ToDo

  • Add Test to every components

License

See LICENSE.md

Libraries

speed_dial_fab