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.

Showcase

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

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)

Libraries

fab_circular_menu

Dart

VM

dart:ffi
Foreign Function Interface for interoperability with the C programming language. [...]

Web

dart:html
HTML elements and other resources for web-based applications that need to interact with the browser and the DOM (Document Object Model). [...]
dart:js
Low-level support for interoperating with JavaScript. [...]
dart:js_util
Utility methods to efficiently manipulate typed JSInterop objects in cases where the name to call is not known at runtime. You should only use these methods when the same effect cannot be achieved with @JS annotations. These methods would be extension methods on JSObject if Dart supported extension methods.