Animated FAB Menu
Animated FAB Menu package lets you add an animated floating action button to your Flutter app that open a list of menu items.
The FabMenu widget is built to be placed in the
Scaffold.floatingActionButton argument, replacing the
FloatingActionButton widget. Its position is set by the
fabAlignment property so you don't need to set it with the
Scaffold.floatingActionButtonLocation argument. By default the position is set to
bottomCenter, but you can change it by the
fabAlignment property to place the button anywhere in the screen. By using the
fabBackgroundColorproperties, you can change the icon and the color of the button to whatever you like.
By pressing the floating action button, a page containing a menu list will be opening with some cool animation. This menu contains items that you can specify by the
children list property. Every child inside the list takes a
title for the item name,
style for the text widget of the name,
onTap function to provide the logic of the on tap action on each child. On top of that, you have an
overlayColor property to change the color of the background opened page,
overlayOpacity to change the opacity of the background color and
closeMenuButton to choose your own back button widget.
The package will handle the animation by itself.
- Add the latest version of package to your
dart pub get):
dependencies: animated_fab_button_menu: ^0.0.2
- Import the package and use it in your Flutter App.
There are a number of properties that you can modify:
- overlayColor (Color of the background menu)
- overlayOpacity (Opacity of the background menu color)
- closeMenuButton (Button that close the menu item)
- children (Items of the menu)
- title (Name of the child menu)
- style (Text style for the child menu)
- onTap (onTap function for the child menu)
Example Usage ( complete with all params ):
Here's what it looks like:
We are working on some improvements including:
xChange color and opacity for menu background. Change color and opacity by specifying
Issues & Feedback
Please file an issue! to send feedback or report a bug. Thank you!