Developing an application in Flutter for Windows has been declared stable and production-ready by version 2.10 announced on February 3rd by Chris Sells, where he talks about improvements for text handling, keyboard handling, and keyboard shortcuts. There is also an in-depth by Tim Sneath dedicated to Windows. Now let's which packages you can use to seamlessly integrate a Flutter app into Windows.

UI

The UI aspect can be considered unimportant but in my opinion plays a huge role in correctly integrating an application developed in Flutter in Windows without this being alien or "out of place", but respects a desktop app perfectly integrated into the system. To achieve this goal it is first of all necessary that the appearance of the app respects what are the conventions of Windows in terms of look & feel, controls, inputs, and structure of the app.

fluent_ui

The first package that comes to our aid is: fluent_ui, also included in the Flutter Favorite program, which serves the purpose of:

Implements Microsoft's Fluent Design System in Flutter

In this package, we find everything necessary to seamlessly integrate our Flutter app into Windows:

• Style: all the styles of the Fluent Style are made available, here more information, for icons, colors, fonts and typography, focus, and brightness;
• Navigation: a particular Scaffold is made available with provision for the AppBar and vertical or horizontal navigation, different types of vertical navigation, badges for notifications, tab view display, and Bottom Navigation;
• Inputs: classic inputs for interaction with the user such as text buttons, buttons with icons, colors and borders, toggle, checkbox, radio, dropdown, slider and form for text input, numbers, dates, time, and combo box;
• Widget: widgets to improve user interaction such as tooltip, dialog, InfoBar, Scrollbar, ListTile, and a TreeView which can be very useful when you need to show a layered or tree content like a file system;
• Mobile: last but not least a series of widgets typical of the mobile but revised in a Fluent way such as the Bottom Sheet, chips, and snack bar.

If you want to develop a Flutter app seamlessly integrated into Windows this is the package to start with, you can also follow its development on the GitHub repo and also browse the web version with examples of everything in the package.

fluentui_system_icons

Another very useful package, released by Microsoft, is fluentui_system_icons with which we will be able to integrate the Fluent UI System Icons into our applications, a collection of familiar, friendly, and modern icons:

Icons are not only available for Windows apps but can be included in any Flutter app for Android, iOS, Web, macOS, and Linux as well. Their use is identical to the Material Design Icons that use the Icon widget so once the package has been added to your pubspec.yaml we can view them in our app with a simple:

Row(
  children: [
    const Icon(FluentIcons.access_time_24_regular),
    IconButton(
      icon: const Icon(FluentIcons.access_time_24_regular),
      onPressed: () {},
    )
  ],
);

window_manager

The window_manager package allows applications developed for Windows, macOS, and Linux desktops to resize and reposition themselves on the screen, listen to a series of events on windows such as focus, maximize, minimize, resize, prevent window resize below or above a certain threshold. All these customizations on the size of the window allow us to optimize the UI of our applications or respond correctly to their resize.

void main() async {

  WidgetsFlutterBinding.ensureInitialized();
  await windowManager.ensureInitialized();

  windowManager.waitUntilReadyToShow().then((_) async{
    await windowManager.setSize(Size(1024, 768));
    await windowManager.setMinimumSize(Size(1400, 1050));
    await windowManager.setMaximumSize(Size(800, 600));
    await windowManager.center();
  });

  runApp(MyApp());
}

Conclusion

In this article, we have seen how to integrate our Flutter app in Windows from the graphical point of view, in the next articles we will see how to do the same thing also on macOS and Linux to be able to develop an app with a single code base that can be integrated across all three desktop platforms.

See you in the next article and in the meantime Happy Fluttering 💙

The icon on the cover are made by: Brands and logotypes icons created by Pixel perfect, Computer icons created by Freepik, Server icons created by srip on Flaticon.