How to seamlessly integrate Flutter apps in macOS

How to seamlessly integrate Flutter apps in macOS

Apr 9, 2022ยท

2 min read

In our previous article we saw which packages can be used to integrate Flutter applications in Windows, in this article we will go through packages that allow us to do the same thing in macOS.

As for Windows applications, also for those in macOS there are guidelines that allow us to respect the look&feel of the system, made available by Apple as Human Interface Guidelines and in particular those for the desktop applications. By following these guidelines we can respect what our users expect from a desktop application in macOS.

macOS-Human-Interfaces-Guidelines.jpg

macos_ui

This package is essential if you want to integrate Flutter apps in macOS as, as the documentation itself reports, it contains

Flutter widgets and themes implementing the current macOS design language

The package macos_ui contains everything you need to structure the layout of your app with MacosWindow and MacosScaffold, add icons, buttons, radio, check box, pop-up, switch, progress, and level indicator. In addition to this, Dialogs are also made available, to ask for user's confirmation and Sheets for details. As for the fluent_ui package, macos_ui can also be used in all Flutter apps and not only on macOS ones, but certainly, the best integration effect is for the operating system for which it was designed.

macosui-examples.jpeg

cupertino_icons

The package cupertino_icons is included by default when a Flutter project is bootstrapped and allows you to include in your applications the Cupertino icons that follow Apple's guidelines, the icons can be viewed here CupertinoIcons class.

Conclusions

As for the integration of Flutter applications in Windows, also for macOS, some useful packages can simplify our life and make our applications perfectly integrated into the desktop environment in which our application runs, it is just a matter of using them correctly to bring to our users a pleasant navigation experience.

See you in the next article and in the meantime Happy Fluttering ๐Ÿ’™

The icon on the cover are made by: Imac icons created by Freepik, Macbook pro icons created by Freepik, Apple icons created by Umeicon on Flaticon.

Did you find this article valuable?

Support Flutter On Desktop by becoming a sponsor. Any amount is appreciated!

ย