Flutter Floating Action Button with Speed Dial

Today iam sharing advanced version of floatingActionButton using thirdparty library called unicornspeeddial.

We all of them are using Gmail app in our daily life ,Gmail recently launched latest version of their android apps with shortcut button for compose emails. floating ActionButton is common feature for most of the all mobile application for easy handling .

By using unicornspeeddial we can popup items by clicking floating Action Button.

Installing

Add following to your package’s pubspec.yaml file:
Check following url to get latest version on Pub and replace below section

dependencies:
  unicorndial: "^1.1.5"

After save the unicorndial packages are automatically downloaded and included into your project.

Implementation

Now in your Dart code, import following line of code

import 'package:unicorndial/unicorndial.dart';

Example

class unicorndial extends StatefulWidget {
  @override
  _unicorndialState createState() => _unicorndialState();
}

class _unicorndialState extends State<unicorndial> {
  @override
  Widget build(BuildContext context) {
    var childButtons = List<UnicornButton>();

    childButtons.add(UnicornButton(
        hasLabel: true,
        labelText: "Choo choo",
        currentButton: FloatingActionButton(
          heroTag: "train",
          backgroundColor: Colors.redAccent,
          mini: true,
          child: Icon(Icons.train),
          onPressed: () {},
        )));

    childButtons.add(UnicornButton(
         labelText: "Airplane title",
          hasLabel: true,
        currentButton: FloatingActionButton(
            heroTag: "airplane",
            backgroundColor: Colors.greenAccent,
            mini: true,
            child: Icon(Icons.airplanemode_active))));

    childButtons.add(UnicornButton(
        currentButton: FloatingActionButton(
            heroTag: "directions",
            backgroundColor: Colors.blueAccent,
            mini: true,
            child: Icon(Icons.directions_car))));

    return Scaffold(
        floatingActionButton: UnicornDialer(
            backgroundColor: Color.fromRGBO(255, 255, 255, 0.6),
            parentButtonBackground: Colors.redAccent,
            orientation: UnicornOrientation.VERTICAL,
            parentButton: Icon(Icons.add),
            childButtons: childButtons),
        appBar: AppBar(),
        body: Center(child: RaisedButton(
          onPressed: () {
            setState(() {});
          },
        )));
  }
}

Available Options

UnicornDialer class

Property	Type	Description
orientation	int	Vertical /horizontal
parentHeroTag	Object	Main FAB hero tag
backgroundColor	Color	Modal background color
parentButton	Icon	Starting Icon
finalButtonIcon	Icon	Ending Icon (after animation complete)
hasBackground	bool	Background modal is set
parentButtonBackground	Color	Main floating button background color
childButtons	List<UnicornButton>	Floating button list
animationDuration	int	Rotation and expanding animation duration (in milliseconds)
childPadding	double	Right padding on the button label
onMainButtonPressed	function	To be called if set on the UnicornDialer parent widget
hasNotch	bool	BottomAppBar support

UnicornButton class

Property	Type	Description
currentButton	FloatingActionButton	Floating list button
labelText	string
labelFontSize	double
labelColor	Color
labelBackgroundColor	Color
labelShadowColor	Color
labelHasShadow	bool
hasLabel	bool

Demo