Flutter Desktop Apps: Getting Started

Todo App - Show menus

On the Mac and windows, each application has a menu system while on mobile there isn’t one. Flutter has built in support for menus on the Mac but not Windows. To help with that you will turn to another plugin to build out a menu system.

On the Mac, when you run the app for the first time you will see some default menus. Where did those come from? They actually come from the xcode project that is part of the flutter app. Let’s take a look at those

Xcode

Start XCode and choose open. navigate to your project’s macos folder and choose open. Open up runner -> Resources -> MainMenu.xib. Expand the Main Menu item. Below, you will see the edit, view and window menus. If you expand the edit menu and then menu, you will see a lot of menu items. Take a look at the view and window menus. All of these are not necessary and we want to build our menus in Flutter. So let’s get rid of them. Select the Edit menu and hit the delete key. Do the same for the view and window menus. Close Xcode.

Android Studio

Now stop and run the app again. Those menus are now gone.

To add menus from flutter for Windows, you will add the menubar plugin. We will use an alternate way to add plugins, by pointing to a github repository. Open up pubspec.yaml and add:

menubar:
  git:
    url: https://github.com/google/flutter-desktop-embedding
    path: plugins/menubar
    ref: 12decbe0f592e14e03223f6f2c0c7e0e2dbd70a1

This will add a plugin from git. This might be a bit different from what you have used before. This just adds the plugin from github instead of the flutter plugins repository. The author expects the Flutter team to add in support for menus in the future so this plugin probably will not last once that happens. But for now, this helps us have menus on Windows.

Run Pub get to download menubar.

In our next episode you will write the menu code.