A customizable application menu bar with submenus for your Flutter Desktop apps.
The menu bar is rendered inside your Flutter app (i.e. not as a native menu bar like in macOS). Native menu bars (at least for macOS) are since lately supported by Flutter. In the future, a native option in this package could get added.
Table of Contents
Preview
![Preview GIF](https://raw.githubusercontent.com/iakmds/menu_bar/master/doc/assets/preview.gif)
Features
- Application menu bar for Flutter Desktop
- Nested submenus support
- Dividers to structure submenus
- Icon in submenu buttons (optional)
- Keyboard shortcuts for button functions
- Shortcut text in submenu buttons (optional)
- Open menus and submenus on hover
- Fully customizable
- Easy to implement
- Rich widget documentation
Usage
First, download and import the package:
import 'package:menu_bar/menu_bar.dart';
1. Integrate the menu bar
Wrap your application around the MenuBarWidget widget and add an empty list to barButtons
so that you have assigned the 2 necessary fields. The child
is your application under the menu bar:
MenuBarWidget(
barButtons: [],
child: Scaffold(...),
),
You should now see an empty menu bar above your application (see picture below). To add buttons with menus, proceed to step 2.
![Screenshot of step 1](https://raw.githubusercontent.com/iakmds/menu_bar/master/doc/assets/step1.png)
2. Create your menus
To add buttons with menus, use the following widget structure:
MenuBarWidget
BarButton
SubMenu
MenuButton
MenuButton
...
BarButton
SubMenu
MenuButton
MenuButton
...
In this example, we will add the following menu bar:
![Screenshot of step 2](https://raw.githubusercontent.com/iakmds/menu_bar/master/doc/assets/step2.png)
MenuBarWidget(
// The buttons in this List are displayed as the buttons on the bar itself
barButtons: [
BarButton(
text: const Text('File', style: TextStyle(color: Colors.white)),
submenu: SubMenu(
menuItems: [
MenuButton(
text: const Text('Save'),
onTap: () {},
icon: const Icon(Icons.save),
shortcutText: 'Ctrl+S',
),
const MenuDivider(),
MenuButton(
text: const Text('Exit'),
onTap: () {},
icon: const Icon(Icons.exit_to_app),
shortcutText: 'Ctrl+Q',
),
],
),
),
BarButton(
text: const Text('Help', style: TextStyle(color: Colors.white)),
submenu: SubMenu(
menuItems: [
MenuButton(
text: const Text('View License'),
onTap: () {},
),
MenuButton(
text: const Text('About'),
onTap: () {},
icon: const Icon(Icons.info),
),
],
),
),
],
// Set the child, i.e. the application under the menu bar
child: Scaffold(...),
),
3. Customize the menu bar
For customization options, see #Customization below or hover over the widgets for all the options in your preferred IDE when integrating the menu bar.
For a complete example, check out example.dart
Customization
Bar customization
![Bar](https://raw.githubusercontent.com/iakmds/menu_bar/master/doc/assets/bar.png)
See class MenuStyle
in https://api.flutter.dev/flutter/material/MenuStyle-class.html.
Bar button customization
![Bar button](https://raw.githubusercontent.com/iakmds/menu_bar/master/doc/assets/barButton.png)
See class ButtonStyle
in https://api.flutter.dev/flutter/material/ButtonStyle-class.html.
Menu and submenu customization
![Submenu](https://raw.githubusercontent.com/iakmds/menu_bar/master/doc/assets/submenu.png)
See class MenuStyle
in https://api.flutter.dev/flutter/material/MenuStyle-class.html.
Menu and submenu buttons customization
![Submenu button](https://raw.githubusercontent.com/iakmds/menu_bar/master/doc/assets/submenuButton.png)
See class ButtonStyle
in https://api.flutter.dev/flutter/material/ButtonStyle-class.html.
Contact
If you want to report a bug, request a feature or improve something, feel free to file an issue in the GitHub repository.
Libraries
- A customizable application menu bar with submenus for your Flutter Desktop apps.