Flutter: AdvFAB (More Than Just A Floating Action Button)

Written by Emile Pavie-Olivier

May 9, 2020

in packages


AdvFAB is An Advanced floating action button that expands itself to reveal its hidden widget. It can also be used as an AnimatedbottomNavigationbar or just an AnimatedFloatingActionBar with the same expansion capabilities.
Have a look at the gif below

Before We Start

Before reading through, here are some relevant link

The AdvFa widget and its properties

Here is the Widget definition

Due to the nature of this widget, we will divide the properties into 3 categories depending on whether you intend to create an AnimatedbottomNavigationbar, an AnimatedFloatingActionBar or just an AnimatedFloatingActionButton

PLEASE NOTE( important ):
1) In order to maintain the screen adaptability of this widget (to make it look even on all screens), I opted for a formula based on percentages of the screen.
This means that every width and height shall be given by you in the range [0 – 100],100 inclusive.

This means that the floatingSpacebarContainerWidth will take 90% of the screen horizontally

2) To help you debug your code easily, I included a log facility, You just have to set ShowLogs property to true and you will get all of them.

3) By default, The “configuration error” logs cannot be disabled, these logs contain important information about a misconfiguration of your widget’s parameter 
An example will we setting both usAsFloatingActionButton and useAsSpaceBar of the AdvFAB to true: if you try that, you will get a configuration error

A) For the AnimatedBottomNavigationbar

The properties concerned are

  • navigationBarIcons List<AdvFabNavigationBarIcon>: This is a list of Icons that needs to be displayed by the navigation bar
  • navigationBarIconActiveColor Color: This is the color of the active/selected Icon, Colors.blue is the default value
  • navigationBarIconInactiveColor → Color: This is the color of the Inactive/unselected Icon, Colors.grey is the default value

Note: To use the AnimatedBottomNavigationBar, the body of the scaffold shall be a AdvBottomBarBody and the useAsNavigationBar property of the AdvFab widget shall be set to true.

B) For the AnimatedFloatingSpaceBar

The properties concerned are

  • spaceBarWidget Widget: this is the widget to put inside the space bar
  • floatingSpaceBarContainerWidth double: The width that the spacebar widget will occupy on the screen

Note: To use the AnimatedFloatingSpaceBar, the useAsFloatingSpaceBar property of the AdvFab widget shall be set to true.

C) For the AnimatedFloatingActionButton

The properties and methods ( if any ) concerned are

  • floatingActionButtonIcon → IconData: This is the Icon to display inside the floating Action Button, if no icon is set, a warning icon will be displayed by default
  • floatingActionButtonIconColor Color: The color of the floating action button icon
  • onFloatingActionButtonTapped Function: called once the floating action button is tapped
  • floatingActionButtonExpendedWidth double: the width of the floating action button once it is expanded

Note: To use the AnimatedFloatingActionButton, the useAsFloatingActionButton property of the AdvFab widget shall be set to true.

D) The other properties ( for animations, colors…)

These properties are uncategorized but they are useful and some of them are really important.
Here are the properties:

  • collapsedColor
  • TweenColorAnimationDuration
  • animationDuration
  • controller
  • useAsNavigationBar
  • useAsFloatingSpaceBar
  • UseAsFloatingActionButton
  • expandingAnimationCurve
  • collapsingAnimationCurve
  • ShowLogs

The AdvFabController widget and its properties

The AdvFabController is the most important class of this widget because it contains all methods necessary to animate and get the widget to work display contents when its state changes from expanded to collapsed.

It has 3 public methods and one public boolean value, they are as follow

  • isCollapsed : will return true/false depending on the status of the floating action button
  • expandFAB: will expand the floating action button
  • collapseFAB: will collapse the floating action button
  • setExpandedWidgetConfiguration: needed to configure the widget to be displayed once the AdvFab is expanded

Note: The “setExpandedWidgetConfiguration” shall be called at least once in the life time of your widget, to configure what has to be displayed once the AdvFab is expanded else you will get an error.


Thank you for using my package, if you have any question feel free to contact me on instagram or directly on my mail [email protected]

Here are my other packages

Related Articles

Stay Up to Date With My Latest News & Updates

Join My Newsletter


Follow Me