GitLocker: The Coding Marketplace

Description:

fab circular menu plus

FAB Circular Menu #

A Flutter package to create a nice circular menu using a Floating Action Button.
Originally inspired by Mayur Kshirsagar's great
FAB Microinteraction design.
It is implemented as a Flutter plugin by Mariano Cordova
(source code). This plugin is the continuation
of the discontinued original plugin. I merged some of my bug fixes and made some changes to my liking.
I forked this plugin out of necessity and I have only a very limited time for maintenance, so PRs
are highly welcome if any change is desired.

Installation #
Just add fab_circular_menu_plus to your pubspec.yml file
dependencies:
fab_circular_menu_plus: ^0.0.1
copied to clipboard
Example #
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Placeholder(),
floatingActionButton: FabCircularMenuPlus(
children: <Widget>[
IconButton(icon: Icon(Icons.home), onPressed: () {
print('Home');
}),
IconButton(icon: Icon(Icons.favorite), onPressed: () {
print('Favorite');
})
]
)
)
);
}
}
copied to clipboard
You can check for a more complete example in the example directory.
Customize #
You can customize the widget appearance using the following properties:

Property
Description
Default

alignment
Sets the widget alignment
Alignment.bottomRight

ringColor
Sets the ring color
accentColor

ringDiameterLimitFactor
Sets the ring diameter limit factor
1.5

ringDiameter
Sets the ring diameter
screenWidth * ringDiameterLimitFactor (portrait) screenHeight * ringDiameterLimitFactor (landscape)

ringWidthLimitFactor
Sets the ring width limit factor
0.2

ringWidth
Sets the ring width
ringDiameter * ringWidthLimitFactor

fabSize
Sets the FAB size
64.0

fabElevation
Sets the elevation for the FAB
8.0

fabColor
Sets the FAB color
primaryColor

fabOpenColor
Sets the FAB color while the menu is open. This property takes precedence over fabColor
-

fabCloseColor
Sets the FAB color while the menu is closed. This property takes precedence over fabColor
-

fabChild
Sets the child inside the FAB. This property takes precedence over fabOpenicon and fabCloseIcon
-

fabOpenIcon
Sets the FAB icon while the menu is open
Icon(Icons.menu)

fabCloseIcon
Sets the FAB icon while the menu is closed
Icon(Icons.close)

fabMargin
Sets the widget margin
EdgeInsets.all(16.0)

animationDuration
Changes the animation duration
Duration(milliseconds: 800)

animationCurve
Allows you to modify the animation curve
Curves.easeInOutCirc

onDisplayChange
This 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 programmatically by using a key.
Just create a key and set it in the key property of the FabCircularMenuPlus, 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<FabCircularMenuPlusState> 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: FabCircularMenuPlus(
key: fabKey,
children: <Widget>[
// ...
]
)
)
);
}
}
copied to clipboard
Contributing #
I will be very happy if you contribute to this project, feel free to submit a PR.