5 Best Flutter Floating Action Button Libraries

A floating action button (FAB) is a circular icon button that floats over content to promote a primary action in a Flutter application. It is often used to add quick access to actions such as Add New, Refresh, Next Step, etc…

Following are the best floating action button libraries to enhance its features:

draggable_fab

draggable_fab is a draggable FAB wrapper widget which can be dragged to any edge of the screen, which makes it easier for users to access depends on their conditions.

DraggableFab(
	child: FloatingActionButton(
	onPressed: (){
		print('clicked')
	},
	child: Icon(Icons.add),
	),
);

flutter_boom_menu

The BoomMenu widget implements a Boom Menu, with icons, title, sub title, animated FAB Icon and hide on scrolling. It is built to be placed in the Scaffold.floatingActionButton argument, replacing the FloatingActionButton widget.

BoomMenu(
	animatedIcon: AnimatedIcons.menu_close,
	animatedIconTheme: IconThemeData(size: 24.0),
	onOpen: () => print('OPENING DIAL'),
	onClose: () => print('DIAL CLOSED'),
	scrollVisible: scrollVisible,
	overlayColor: Colors.black,
	overlayOpacity: 0.7,
	children: [
		MenuItem(
		  child: Icon(Icons.accessibility, color: Colors.black),
		  title: "Profiles",
		  titleColor: Colors.white,
		  subtitle: "You Can View the Noel Profile",
		  subTitleColor: Colors.white,
		  backgroundColor: Colors.deepOrange,
		  onTap: () => print('FIRST CHILD'),
		),
		MenuItem(
		  child: Icon(Icons.brush, color: Colors.black),
		  title: "Profiles",
		  titleColor: Colors.white,
		  subtitle: "You Can View the Noel Profile",
		  subTitleColor: Colors.white,
		  backgroundColor: Colors.green,
		  onTap: () => print('SECOND CHILD'),
		),
		MenuItem(
		  child: Icon(Icons.keyboard_voice, color: Colors.black),
		  title: "Profile",
		  titleColor: Colors.white,
		  subtitle: "You Can View the Noel Profile",
		  subTitleColor: Colors.white,
		  backgroundColor: Colors.blue,
		  onTap: () => print('THIRD CHILD'),
		),
		MenuItem(
		  child: Icon(Icons.ac_unit, color: Colors.black),
		  title: "Profiles",
		  titleColor: Colors.white,
		  subtitle: "You Can View the Noel Profile",
		  subTitleColor: Colors.white,
		  backgroundColor: Colors.blue,
		  onTap: () => print('FOURTH CHILD'),
		)
	],
)

sliver_fab

sliver_fab widget places a widget on the edge of FlexibleSpacebar.

Scaffold(
  body: Builder(
    builder: (context) =>
    SliverFab(
      floatingWidget: FloatingActionButton(
        onPressed: () =>
            Scaffold.of(context).showSnackBar(
                SnackBar(content: Text("You clicked FAB!"))),
        child: Icon(Icons.add),
      ),
      floatingPosition: FloatingPosition(right: 16),
      expandedHeight: 256.0,
      slivers: <Widget>[
        SliverAppBar(
          expandedHeight: 256.0,
          pinned: true,
          flexibleSpace: FlexibleSpaceBar(
            title: Text("SliverFab Example"),
            background: Image.asset(
              "img.jpg",
              fit: BoxFit.cover,
            ),
          ),
        ),
        SliverList(
          delegate: SliverChildListDelegate(
            List.generate(
              30,
                  (int index) =>
              ListTile(title: Text("Item $index")),
            ),
          ),
        ),
      ],
    ),
  ),
);

flutter_fab_dialer

This widget use a Fab Dialer / Fab Speed Dial to use it as a menu. It supports four types of fab menu items.

FabMiniMenuItem.withTextWithImage(
	img,
	4.0,
	"Button menu",
	(){
		//do something here
	},
	"Tap me",
	Colors.blue,
	Colors.white,
	true
),

simple_speed_dial

This is also a simple speed dial for Flutter. You can add infinity number of menu items with or without label next to an icon. Colors of every FAB and cusotm animation controller can be set.

SpeedDial(
    child: Icon(Icons.add),
    closedForegroundColor: Colors.black,
    openForegroundColor: Colors.white,
    closedBackgroundColor: Colors.white,
    openBackgroundColor: Colors.black,
    speedDialChildren: <SpeedDialChild>[
      SpeedDialChild(
        child: Icon(Icons.directions_run),
        foregroundColor: Colors.white,
        backgroundColor: Colors.red,
        label: 'Let\'s start a run!',
        onPressed: () {        
        },
        closeSpeedDialOnPressed: false,
      ),
      SpeedDialChild(
        child: Icon(Icons.directions_walk),
        foregroundColor: Colors.black,
        backgroundColor: Colors.yellow,
        label: 'Let\'s go for a walk!',
        onPressed: () {          
        },
      ),
           
    ],
)