Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/marianocordoba/fab-circular-menu
A Flutter package to create a nice circular menu using a Floating Action Button.
https://github.com/marianocordoba/fab-circular-menu
floating-action-button floatingactionbutton floatingactionmenu flutter flutter-package menu
Last synced: 2 months ago
JSON representation
A Flutter package to create a nice circular menu using a Floating Action Button.
- Host: GitHub
- URL: https://github.com/marianocordoba/fab-circular-menu
- Owner: marianocordoba
- License: mit
- Archived: true
- Created: 2019-06-04T00:49:37.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-06-17T04:32:17.000Z (over 1 year ago)
- Last Synced: 2024-10-31T08:42:54.494Z (2 months ago)
- Topics: floating-action-button, floatingactionbutton, floatingactionmenu, flutter, flutter-package, menu
- Language: Dart
- Homepage: https://pub.dev/packages/fab_circular_menu
- Size: 91.8 KB
- Stars: 198
- Watchers: 4
- Forks: 72
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# FAB Circular Menu
[](https://pub.dev/packages/fab_circular_menu)
[](https://github.com/marianocordoba/fab-circular-menu/blob/master/LICENSE)
[](https://codemagic.io/apps/5cf6ad31434563000a9534d5/5cf6ad31434563000a9534d4/latest_build)
A Flutter package to create a nice circular menu using a Floating Action Button.
Inspired by [Mayur Kshirsagar](https://dribbble.com/mayurksgr)'s great [FAB Microinteraction](https://dribbble.com/shots/4354100-Daily-UI-Challenge-Day-75-FAB-Microinteraction) design.
## Installation
Just add `fab_circular_menu` to your [pubspec.yml](https://flutter.io/using-packages/) file
```yml
dependencies:
fab_circular_menu: ^1.0.0
```
## Example
```dart
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Placeholder(),
floatingActionButton: FabCircularMenu(
children: [
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](https://github.com/marianocordoba/fab-circular-menu/tree/master/example) directory.
## Customize
You can customize the widget appareance using the following properties:
| Property | Description | Default |
|----------|-------------|---------|
| alignment | Sets the widget alignment | `Alignment.bottomRight` |
| ringColor | Sets the ring color | `accentColor` |
| ringDiameter | Sets the ring diameter | `screenWidth * 1.25` (portrait)
`screenHeight * 1.25` (landscape) |
| ringWidth | Sets the ring width | `ringDiameter * 0.3` |
| 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 programatically by using a [key](https://api.flutter.dev/flutter/foundation/Key-class.html). 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.
```dart
class MyApp extends StatelessWidget {
final GlobalKey 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: [
// ...
]
)
)
);
}
}
```
## Contributing
I will be very happy if you contribute to this project, please submit a PR 😁