How to customize AppMenu(MenuBar) in flutter desktop?

Question

I am new to flutter and am creating one application with it that is run on all platforms like iOS, Android, Desktop (macOS, Linux, Windows), and web also.

Now, the client wants to customize the MenuBar and put some extra actions and set grouping of MenuItems.

The MenuBar needs to be something like this:

Is it possible to achieve this task through flutter?

score 5 · Answer 1 · answered Jun 30 '20 at 02:45

5

The prototype menubar plugin provides limited ability to control the application menu.

answered Jun 30 '20 at 02:45

smorgan

20,228
3
47
55

There is no example for use it. can you provide me the way of implemetation plz? – Jatin Patel Jun 30 '20 at 04:41
1

https://github.com/google/flutter-desktop-embedding/blob/4687840a19f23cff84f1bedeb6d24ac85abd99c8/testbed/lib/main.dart#L114 – smorgan Jun 30 '20 at 04:47
1

Thank you so much for sharing the example. Is there a way to override the default menuItem? e.g There is Submenu "edit" by default, I would like to remove that or add a menuItem to that submenu. – Mahesh Jamdade Jan 11 '22 at 17:26
The `menubar` plugin doesn't provide any features related to existing menus, but you could certainly write a plugin that does what you are describing. If you just want to remove a menu though all you need to do is open the XIB in Xcode and delete it. – smorgan Jan 12 '22 at 00:59

score 3 · Accepted Answer · answered Jan 30 '23 at 13:27

From flutter 3.7 you can use the PlatformMenuBar widget for the native menu bar. You can see this in the below example

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class Login extends StatelessWidget {
  const Login({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: PlatformMenuBarExample(),
    );
  }
}

class PlatformMenuBarExample extends StatefulWidget {
  const PlatformMenuBarExample({super.key});

  @override
  State<PlatformMenuBarExample> createState() => _PlatformMenuBarExampleState();
}

class _PlatformMenuBarExampleState extends State<PlatformMenuBarExample> {
  String _message = 'Hello';
  bool _showMessage = false;

  void _handleMenuSelection(MenuSelection value) {
    switch (value) {
      case MenuSelection.about:
        showAboutDialog(
          context: context,
          applicationName: 'MenuBar Sample',
          applicationVersion: '1.0.0',
        );
        break;
      case MenuSelection.showMessage:
        setState(() {
          _showMessage = !_showMessage;
        });
        break;
    }
  }

  @override
  Widget build(BuildContext context) {
    ////////////////////////////////////
    // THIS SAMPLE ONLY WORKS ON MACOS.
    ////////////////////////////////////

    // This builds a menu hierarchy that looks like this:
    // Flutter API Sample
    //  ├ About
    //  ├ ────────  (group divider)
    //  ├ Hide/Show Message
    //  ├ Messages
    //  │  ├ I am not throwing away my shot.
    //  │  └ There's a million things I haven't done, but just you wait.
    //  └ Quit
    return PlatformMenuBar(
      menus: <PlatformMenuItem>[
        PlatformMenu(
          label: 'Flutter API Sample',
          menus: <PlatformMenuItem>[
            PlatformMenuItemGroup(
              members: <PlatformMenuItem>[
                PlatformMenuItem(
                  label: 'About',
                  onSelected: () {
                    _handleMenuSelection(MenuSelection.about);
                  },
                ),
              ],
            ),
            PlatformMenuItemGroup(
              members: <PlatformMenuItem>[
                PlatformMenuItem(
                  onSelected: () {
                    _handleMenuSelection(MenuSelection.showMessage);
                  },
                  shortcut: const CharacterActivator('m'),
                  label: _showMessage ? 'Hide Message' : 'Show Message',
                ),
                PlatformMenu(
                  label: 'Messages',
                  menus: <PlatformMenuItem>[
                    PlatformMenuItem(
                      label: 'I am not throwing away my shot.',
                      shortcut: const SingleActivator(LogicalKeyboardKey.digit1,
                          meta: true),
                      onSelected: () {
                        setState(() {
                          _message = 'I am not throwing away my shot.';
                        });
                      },
                    ),
                    PlatformMenuItem(
                      label:
                          "There's a million things I haven't done, but just you wait.",
                      shortcut: const SingleActivator(LogicalKeyboardKey.digit2,
                          meta: true),
                      onSelected: () {
                        setState(() {
                          _message =
                              "There's a million things I haven't done, but just you wait.";
                        });
                      },
                    ),
                  ],
                ),
                
              ],
            ),
            if (PlatformProvidedMenuItem.hasMenu(
                PlatformProvidedMenuItemType.quit))
              const PlatformProvidedMenuItem(
                  type: PlatformProvidedMenuItemType.quit),
          ],
        ),
        
      ],
      child: Center(
        child: Text(_showMessage
            ? _message
            : 'This space intentionally left blank.\n'
                'Show a message here using the menu.'),
      ),
    );
  }
}

enum MenuSelection {
  about,
  showMessage,
}

Reference: https://api.flutter.dev/flutter/widgets/PlatformMenuBar-class.html

score 0 · Answer 3 · answered Jan 25 '23 at 07:58

Flutter 3.7 added a new PlatformMenuBar widget, which defines platform native menu bars rendered by macOS instead of Flutter.

From the docs:

A menu bar that uses the platform's native APIs to construct and render a menu described by a PlatformMenu/PlatformMenuItem hierarchy.

This widget is especially useful on macOS, where a system menu is a required part of every application. Flutter only includes support for macOS out of the box, but support for other platforms may be provided via plugins that set WidgetsBinding.platformMenuDelegate in their initialization.

How to customize AppMenu(MenuBar) in flutter desktop?

3 Answers3