FAB Circular Menu

Pub

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

Inspired by Mayur Kshirsagar's great FAB Microinteraction design.

WARNING! This package is under development and should not be used in production apps.

Showcase

Getting started

Wrap your content with FabCircularMenu and set your desired options:

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

Options

PropertyTypeDescriptionDefault
required childWidgetThe child of this widget-
required optionsListThe available options of the menu-
ringColorColorThe color of the ringColors.white
ringDiameterdoubleThe diameter of the ringscreenWidth * 1.2
ringWidthdoubleThe width of the ringringDiameter / 3
fabMarginEdgeInsetsThe margin around the FABEdgeInsets.all(24.0)
fabColorColorThe color of the FABprimaryColor
fabOpenIconIconThe open iconIcon(Icons.menu)
fabCloseIconIconThe close iconIcon(Icons.close)
animationDurationDurationThe animation durationDuration(milliseconds: 800)

To Do

  • Improve documentation
  • Add tests
  • x Add examples

Libraries

fab_circular_menu