Flutter Desktop Apps: Getting Started

Todo App

If you’ve used Flutter before, you’ve seen the errors that happen when a widget overflows. This displays errors on the screen that will confuse the user. Since the user can change the size of the window that desktop apps are run on, this can cause display errors. You can prevent some of these errors by preventing the user from making the window too small.

You will use the desktop_window plugin that works on all three platforms. This plugin will allow you to set the current, minimum and maximum sizes as well as toggle between full screen.

Android Studio

Open up the starter project. In the project window, open up pubspec.yaml. After the path_provider package, add desktop_window: ^0.4.0. This will add the desktop_window plugin. Hit Pub get to download the plugin.

On the Mac, choose the MacOS (Desktop) device and run the app. Try to resize the app and see what happens when the window gets too small. You can see the errors that get shown when the window is too small.

Now, open up main.dart. After WidgetsFlutterBinding.ensureInitialized, add:

if (Platform.isWindows || Platform.isLinux || Platform.isMacOS) {
  await DesktopWindow.setWindowSize(const Size(700,500));

  await DesktopWindow.setMinWindowSize(const Size(700,500));
  await DesktopWindow.setMaxWindowSize(Size.infinite);
}

This will check the platform to make sure this isn’t running on iOS or Android and set the current window size, the minimum window size and the maximum window size, which can be as big as possible.

Run the app again and check to make sure that the window cannot be sized too small. Great. Now you don’t have to worry about the user seeing the dreaded overflow images.