How to use the full screen in the Flutter Windows app

Question

How do I use the full screen in the Flutter Window app?

I want to see the app in full screen without the top bar and bottom bar in the Windows app. For example, in Chrome, I want to make F11 come to the full screen, and then F11 come back to the original state.

The key is not necessarily F11, but you can change it using AlertDialog or Icon.

I looked up Google and code hard, and I couldn't find a solution.

Flutter feels optimized for IOS and Android. But I want to run with a Windows (desktop) app.

Can someone help me?

Answer 1

You can use the window_manager package for this purpose. Along with serviceBinding class to hook the key you want to control entering and exiting full screen for your application.

In the following example enter key will make application enter fullscreen and esc key will exit from full screen. Add this line to the main function of the app.

ServicesBinding.instance.keyboard.addHandler(_onKey);

// Add this function to the same class

 bool _onKey(KeyEvent event) {
    if (event is KeyDownEvent &&
        event.logicalKey == LogicalKeyboardKey.escape) {
      windowManager.setAlwaysOnTop(false);
      windowManager.setTitleBarStyle(TitleBarStyle.normal);
    } else if (event is KeyDownEvent &&
        event.logicalKey == LogicalKeyboardKey.enter) {
      windowManager.setAlwaysOnTop(true);
      windowManager.setTitleBarStyle(TitleBarStyle.hidden);
    }
    return false;
  }