Tuesday, September 26, 2023

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

PropertyTypeDescription
orientationintVertical /horizontal
parentHeroTagObjectMain FAB hero tag
backgroundColorColorModal background color
parentButtonIconStarting Icon
finalButtonIconIconEnding Icon (after animation complete)
hasBackgroundboolBackground modal is set
parentButtonBackgroundColorMain floating button background color
childButtonsList<UnicornButton>Floating button list
animationDurationintRotation and expanding animation duration (in milliseconds)
childPaddingdoubleRight padding on the button label
onMainButtonPressedfunctionTo be called if set on the UnicornDialer parent widget
hasNotchboolBottomAppBar support

UnicornButton class

PropertyTypeDescription
currentButtonFloatingActionButtonFloating list button
labelTextstring
labelFontSizedouble
labelColorColor
labelBackgroundColorColor
labelShadowColorColor
labelHasShadowbool
hasLabelbool

Demo