fab_circular_menu 1.0.0

Flutter Android iOS web

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

FAB Circular Menu #

Pub Pull Requests are welcome Codemagic build status

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

Inspired by Mayur Kshirsagar's great FAB Microinteraction design.

Showcase

Installation #

Just add fab_circular_menu to your pubspec.yml file

dependencies:
  fab_circular_menu: ^1.0.0

Example #

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Placeholder(),
        floatingActionButton: FabCircularMenu(
          children: <Widget>[
            IconButton(icon: Icon(Icons.home), onPressed: () {
              print('Home');
            }),
            IconButton(icon: Icon(Icons.favorite), onPressed: () {
              print('Favorite');
            })
          ]
        )
      )
    );
  }
}

You can check for a more complete example in the example directory.

Customize #

You can customize the widget appareance using the following properties:

PropertyDescriptionDefault
alignmentSets the widget alignmentAlignment.bottomRight
ringColorSets the ring coloraccentColor
ringDiameterSets de ring diameterscreenWidth * 1.25 (portrait)
screenHeight * 1.25 (landscape)
ringWidthSets the ring widthringDiameter * 0.3
fabSizeSets the FAB size64.0
fabElevationSets the elevation for the FAB8.0
fabColorSets the FAB colorprimaryColor
fabOpenColorSets the FAB color while the menu is open. This property takes precedence over fabColor-
fabCloseColorSets the FAB color while the menu is closed. This property takes precedence over fabColor-
fabOpenIconSets the FAB icon while the menu is openIcon(Icons.menu)
fabCloseIconSets the FAB icon while the menu is closedIcon(Icons.close)
fabMarginSets the widget marginEdgeInsets.all(16.0)
animationDurationChanges the animation durationDuration(milliseconds: 800)
animationCurveAllows you to modify de animation curveCurves.easeInOutCirc
onDisplayChangeThis callback is called every time the menu is opened or closed, passing the current state as a parameter.-

Handling the menu programmatically #

It is possible to handle the menu programatically by using a key. Just create a key and set it in the key property of the FabCircularMenu, then use the key to get the current state and open, close or check the status of the menu.

class MyApp extends StatelessWidget {
  final GlobalKey<FabCircularMenuState> fabKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: RaisedButton(
          onPressed: () {
            if (fabKey.currentState.isOpen) {
              fabKey.currentState.close();
            } else {
              fabKey.currentState.open();
            }
          },
          child: Text('Toggle menu')
        ),
        floatingActionButton: FabCircularMenu(
          key: fabKey,
          children: <Widget>[
            // ...
          ]
        )
      )
    );
  }
}

Contributing #

I will be very happy if you contribute to this project, please submit a PR 😁

159
likes
90
pub points
94%
popularity

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

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

marianocordoba039@gmail.com

License

MIT (LICENSE)

Dependencies

flutter, vector_math

More

Packages that depend on fab_circular_menu