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

