Flutter Desktop Apps: Getting Started

Android Studio

Now that you have the first two menus implemented, you will create the last three. First, let’s add the methods to the menu creation methods:

in createMenus add:

createTodosMenu(),
createFindMenu(),
createHelpMenu()

and in createWindowsMenus add:

createWindowsTodosMenu(),
createWindowsFindMenu(),
createWindowsHelpMenu()

Now, create the Todo menu:

PlatformMenu createTodosMenu() {
  return PlatformMenu(label: 'Todos', menus: [
    PlatformMenu(label: 'New', menus: [
      PlatformMenuItem(label: 'List', onSelected: () => newList()),
      PlatformMenuItem(label: 'Category', onSelected: () => newCategory()),
      PlatformMenuItem(label: 'Todo', onSelected: () => newTodo()),
    ]),
    PlatformMenu(label: 'Delete', menus: [
      PlatformMenuItem(label: 'List', onSelected: () => deleteList()),
      PlatformMenuItem(label: 'Category', onSelected: () => deleteCategory()),
      PlatformMenuItem(label: 'Todo', onSelected: () => deleteTodo()),
    ])
  ]);
}

Now the Windows version:

NativeSubmenu createWindowsTodosMenu() {
  return NativeSubmenu(label: 'Todos', children: [
    NativeSubmenu(label: 'New', children: [
      NativeMenuItem(label: 'List', onSelected: () => newList()),
      NativeMenuItem(label: 'Category', onSelected: () => newCategory()),
      NativeMenuItem(label: 'Todo', onSelected: () => newTodo()),
    ]),
    NativeSubmenu(label: 'Delete', children: [
      NativeMenuItem(label: 'List', onSelected: () => deleteList()),
      NativeMenuItem(label: 'Category', onSelected: () => deleteCategory()),
      NativeMenuItem(label: 'Todo', onSelected: () => deleteTodo()),
    ])
  ]);
}

This will create a menu with several sub-menus. The Todo menu will have a new menu which has a list, category and todo items. Only newList has any real functionality. The others are challenge items for you to try and implement.

Next go to createTodosMenu and add the find menu:

PlatformMenu createFindMenu() {
  return PlatformMenu(label: 'Find', menus: [
    PlatformMenuItem(label: 'Search', onSelected: () => handleSearch()),
    PlatformMenuItem(label: 'Next', onSelected: () => handleNext()),
    PlatformMenuItem(label: 'Previous', onSelected: () => handlePrevious())
  ]);
}

Now the Windows version:

NativeSubmenu createWindowsFindMenu() {
  return NativeSubmenu(label: 'Find', children: [
    NativeMenuItem(label: 'Search', onSelected: () => handleSearch()),
    NativeMenuItem(label: 'Next', onSelected: () => handleNext()),
    NativeMenuItem(label: 'Previous', onSelected: () => handlePrevious())
  ]);
}

This provides the ablitity to handle searches.

Finally, go to createHelpMenu and create the help menu:

PlatformMenu createHelpMenu() {
  return PlatformMenu(
      label: 'Help',
      menus: [PlatformMenuItem(label: 'Help', onSelected: () => handleHelp())]);
}

Now the Windows version:

NativeSubmenu createWindowsHelpMenu() {
  return NativeSubmenu(label: 'Help', children: [
    NativeMenuItem(label: 'Help', onSelected: () => handleHelp())
  ]);
}

Here, you can provide any help you want for the app. Stop and rerun the app and make sure all of these menus exist. If you try and execute any of these menus, nothing will happen. There is one menu item that works. Do you know which one?

Try selecting the New List menu. Here, a dialog comes up with an entry for the name of a new list. Once we type in the name, a new todo list will appear. Try entering in new categories and todos on this screen.

The other menus have been left as an exercise for you. How would handle these? How do you deal with the lack of a BuildContext class?

In our next episode you will implement the deletelist menu as a challenge.