Flutter Desktop Apps: Getting Started

Android Studio

Now open up menus.dart. You will see a lot of empty methods. RiverPod is used to create the MenuProvider. This allows menus to access any other provider via the ref variable. There are two main methods: createMenus for the Mac and createWindowsMenus for Windows. Here you will build up your main menu system. You want a File, Edit, Todos, Find and Help menus. Most of these will just be empty menus that you can add functionality to later.

Start by adding the Mac menu items in the createMenus method:

return [
  createFileMenu(),
  createEditMenu(),
];
}

The menubar plugin has a function called setApplicationMenu that will set the main menu for Windows from the given list of menus. Add the following to the createWindowsMenu method:

setApplicationMenu([
  createWindowsFileMenu(),
  createWindowsEditMenu(),
]);

This will create the 5 menus we want to show. These haven’t been created yet. Let’s start with the file menu. Add:

PlatformMenu createFileMenu() {
  return PlatformMenu(label: 'File', menus: [
    PlatformMenuItem(label: 'Import', onSelected: () => handleImport()),
    PlatformMenuItem(label: 'Export', onSelected: () => handleExport())
      PlatformMenuItemGroup(members: [
        PlatformMenuItem(
            label: 'Quit',
            onSelected: () => handleQuit(),
            shortcut: const SingleActivator(
                LogicalKeyboardKey.keyQ, meta: true))
      ])
  ]);
}

Then create the Windows version:

NativeSubmenu createWindowsFileMenu() {
  return NativeSubmenu(label: 'File', children: [
    NativeMenuItem(label: 'Import', onSelected: () => handleImport()),
    NativeMenuItem(label: 'Export', onSelected: () => handleExport())
    NativeMenuItem(
        label: 'Quit',
        onSelected: () => handleQuit(),
        shortcut:
            LogicalKeySet(LogicalKeyboardKey.meta, LogicalKeyboardKey.keyQ)),
  ]);
}

This method returns a submenu with a name of file and two children that are MenuItems: Import and export. The NativeSubmenu and the NativeMenuItem classes are from the plugin. When clicked, these methods will call the handleImport and handleExport methods respectively.

Next, create the edit menu. Add:

PlatformMenu createEditMenu() {
  return PlatformMenu(label: 'Edit', menus: [
    PlatformMenuItem(label: 'Cut', onSelected: () => handleCut()),
    PlatformMenuItem(label: 'Copy', onSelected: () => handleCopy()),
    PlatformMenuItem(label: 'Paste', onSelected: () => handlePaste())
  ]);
}

Now the Windows version:

NativeSubmenu createWindowsEditMenu() {
  return NativeSubmenu(label: 'Edit', children: [
    NativeMenuItem(label: 'Cut', onSelected: () => handleCut()),
    NativeMenuItem(label: 'Copy', onSelected: () => handleCopy()),
    NativeMenuItem(label: 'Paste', onSelected: () => handlePaste())
  ]);
}

This will create a standard edit menu with cut, copy and paste.

Stop and rerun the app and make sure all of these menus exist.

In the next episode you will add the last three menus.