Friday, February 26, 2021

Flutter for Desktop

Desktop support for Flutter

Desktop support allows you to compile Flutter source code to a native macOS Desktop app. Flutter’s desktop support also extends to plugins—you can install existing plugins that support the macOS platform, or you can create your own.

Requirements

To create a Flutter app with macOS support, you need the following software:

Create a new project

You can use the following steps to create a new project with macOS support.

Set up

At the command line, perform the following commands to make sure that you have the latest support for macOS and that it’s enabled. If you see “flutter: command not found”, then make sure that you have installed the Flutter SDK and that it’s in your path.


$ flutter channel master  # or dev
$ flutter upgrade
$ flutter config --enable-macos-desktop

To ensure that desktop is installed, list the devices available. You should see something like the following:


$ flutter devices
1 connected device:

macOS      • macOS      • darwin-x64     • Mac OS X 10.15.4 19E266

You might also run flutter doctor to see if there are any unresolved issues. It should look something like the following:


Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, 1.18.0-10.0.pre, on Mac OS X 10.15.4 19E287, locale
    en-US)
 
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 11.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 3.6)
[✓] VS Code (version 1.44.2)
[✓] Connected device (3 available)

• No issues found!

After enabling macOS support, restart your IDE. You should now see macOS (desktop) in the device pulldown.

Create and run

Creating a new project with desktop support is no different than creating a new Flutter project for other platforms.

Once you’ve configured your environment for desktop support, you can create and run a desktop app either in the IDE or from the command line.

IDE

After you’ve configured your environment to support desktop, make sure you restart the IDE if it was already running.

Create a new app in your IDE and it automatically creates iOS, Android, and macOS versions of your app. (And web, too, if you’ve enabled web support.) From the device pulldown, select macOS (desktop) and run your app to see it launch on the desktop.

Command line

To create a new app that includes desktop support (in addition to mobile support), run the following commands, substituting myapp with the name of your project:


$ flutter create myapp
$ cd myapp

To launch your app from the command line, enter the following from the top of the package:


$ flutter run -d macos

Build

To generate a release build run the following command:


$ flutter build macos

Add desktop support to an existing app

To add desktop support to an existing project, run the following command in a terminal from the root project directory:


$ flutter create .

This adds the necessary files and directories to your Flutter project.

Entitlements and the App Sandbox

macOS builds are configured by default to be signed, and sandboxed with App Sandbox. This means that if you want to confer specific capabilities or services on your macOS app, such as the following:

  • Accessing the internet
  • Capturing movies and images from the built-in camera
  • Accessing files

Then you must set up specific entitlements in Xcode. The following section tells you how to do this.

Setting up entitlements

Managing sandbox settings is done in the macos/Runner/*.entitlements files. When editing these files, you shouldn’t remove the original Runner-DebugProfile.entitlements exceptions (that support incoming network connections and JIT), as they are necessary for the debug and profile modes to function correctly.

If you are used to managing entitlement files through the Xcode capabilities UI, be aware that the capabilities editor updates only one of the two files or, in some cases, it creates a whole new entitlements file and switches the project to use it for all configurations. Either scenario causes issues. We recommend that you edit the files directly. Unless you have a very specific reason, you should always make identical changes to both files.

If you keep the App Sandbox enabled (which is required if you plan to distribute your app in the App Store), you need to manage entitlements for your application when you add certain plugins or other native functionality. For instance, using the file_chooser plugin requires adding either the com.apple.security.files.user-selected.read-only or com.apple.security.files.user-selected.read-write entitlement. Another common entitlement is com.apple.security.network.client, which you must add if you make any network requests.

For more information on these topics, see App Sandbox and Entitlements on the Apple Developer site.

Hardened runtime

If you choose to distribute your application outside of the App Store, you need to notarize your application for compatibility with macOS 10.15+. This requires enabling the Hardened Runtime option. Once you have enabled it, you need a valid signing certificate in order to build.

By default, the entitlements file allows JIT for debug builds but, as with App Sandbox, you may need to manage other entitlements. If you have both App Sandbox and Hardened Runtime enabled, you may need to add multiple entitlements for the same resource. For instance, microphone access would require both com.apple.security.device.audio-input (for Hardened Runtime) and com.apple.security.device.microphone (for App Sandbox).

For more information on this topic, see Hardened Runtime on the Apple Developer site.

Plugin support

Flutter on the desktop supports using and creating plugins.

To use a plugin that supports macOS, follow the steps for plugins in using packages. Flutter automatically adds the necessary native code to your project, as with iOS or Android.

These are a few of the plugins that support desktop on macOS:

Creating a plugin

Federated plugins are a recent addition to Flutter’s plugin support. They allow you to separate functionality for different platforms into different packages; so the Android implementation can be in one package, and the macOS implementation in another. Desktop plugins are perfectly suited to be implemented as part of a federated plugin. For more information, see the following resources:

Samples

You can run the following samples as desktop apps, as well as download and inspect the source code to learn more about Flutter desktop support.

Flutter Gallery running web apprepo
A samples project hosted on GitHub to help developers evaluate and use Flutter. The Gallery consists of a collection of Material design widgets, behaviors, and vignettes implemented with Flutter. You can clone the project and run Gallery as a desktop app by following the instructions provided in the README.
Photo Search app
A sample app built as a desktop application that uses the following desktop-supported plugins:

What’s next

Stay tuned for updates on desktop support! We continue to develop support for macOS, Windows, and Linux.

Watch the Desktop shells page on the Flutter wiki for more information and ongoing updates.

Welcome Back!

Login to your account below

Create New Account!

Fill the forms below to register

Retrieve your password

Please enter your username or email address to reset your password.