FAB Circular Menu

A Flutter package to create a nice circular menu using a Floating Action Button.

Inspired by Mayur Kshirsagar‘s great FAB Microinteraction design.

Getting started

Wrap your content with FabCircularMenu and set your desired options:

MaterialApp(
  home: Scaffold(
    body: FabCircularMenu(
      child: Placeholder(), // Replace this with your content
      options: <Widget>[
        IconButton(icon: Icon(Icons.home), onPressed: () {
          print('Pressed!');
        })
      ]
    )
  )
)

Options

Property	Type	Description	Default	Caveat
`required` child	Widget	The child of this widget	–
`required` options	List	The available options of the menu	–
ringColor	Color	The color of the ring	`Colors.white`
ringDiameter	double	The diameter of the ring	`screenWidth * 1.2`
ringWidth	double	The width of the ring	`ringDiameter / 3`
fabMargin	EdgeInsets	The margin around the FAB	`EdgeInsets.all(24.0)`
fabColor	Color	The color of the FAB	`primaryColor`
fabOpenColor	Color	The color of the FAB when opened	`primaryColor`	Will override `fabColor` for open state
fabCloseColor	Color	The color of the FAB when closed	`primaryColor`	Will override `fabColor` for close state
fabOpenIcon	Icon	The open icon	`Icon(Icons.menu)`
fabCloseIcon	Icon	The close icon	`Icon(Icons.close)`
animationDuration	Duration	The animation duration	`Duration(milliseconds: 800)`
onDisplayChange	Function	A callback called when the open/close state changes	`Function`
controller	FabCircularMenuController	A controller for opening or closing the menu	`null`