Getting Started with Flutter Desktop
Building Desktop Applications with Dart and Flutter
Introduction
Since the release of Flutter in December 2018, it’s gained a lot of momentum, and is quickly becoming the go-to choice for many pro mobile developers around the world today.
Building upon the success of the Dart language and the Flutter ecosystem, desktop target support provides new opportunities for creating great desktop apps with clean and readable codebases and high-performance binaries.
In this article, we will examine the process of creating a simple desktop app with Flutter and explore the possibilities and challenges of using these tools for building complete desktop applications.
Requirements
To build desktop apps with Flutter, an up-to-date Flutter SDK environment with desktop support enabled is required:
- If you don’t have it yet, download Flutter for your OS from their website
- Switch to the master channel with
$ flutter channel master - You can upgrade Flutter (if necessary) with
$ flutter upgrade
To enable support for your target environment:
- Linux:
$ flutter config --enable-linux-desktop - macOS:
$ flutter config --enable-macos-desktop - Windows:
$ flutter config --enable-windows-desktop
The flutter create command does not yet currently support all major OS targets, and currently (as of Dec 2019) only supports targeting macOS. For more information on the current and future status of desktop support, check out this GitHub wiki page.
Project Setup
To create a macOS app, simply run $flutter create and a project will be created. To create an application that can also support Linux and Windows, a starter project supporting all three environments is provided by the Flutter team with the flutter-desktop-embedding project.
This can be cloned or downloaded to use as a starting point for new projects.
The example project used in this article was created by cloning the flutter desktop embedding repo and copying the contents of example/ into a new project. For a copy of this article’s example project code, check out this repo.
Let’s take a look at the project definition file, pubspec.yaml:
For this and other desktop embedded projects, a recent version of Flutter is required. A dependency for a simple desktop plugin — a native color picker — has been included, in addition to a few sample fonts. Next, we’ll check out the Dart code for this simple one-screen demo application.
Application Entry Point
The main file for this app is the standard-issue lib/main.dart:
The main()function bootstraps the application and sets the default debug target platform to fuchsia, which is an OS being developed at Google that includes a UI built with Dart and Flutter. The class MyApp is a basic implementation of StatelessWidget that returns the main container for the app itself, with a title, theme, and home widget standard for any Flutter app.
Note the property darkTheme and it’s value of ThemeData.dark() which provides a dark theme when one is requested by the operating system, as in the case of macOS with system-wide dark theme enabled. Next we’ll take a look at the example page content and what it does.
Home Screen
The bulk of the app content for this simple demo is located in lib/home.dart:
The Home class imports a few packages (including the color_panel plugin) and implements a StatefulWidget with backing State, to allow this screen to store and update application state. Dart and Flutter provide great features for managing state using a variety of tools and patterns, the simplest of them being a stateful widget like the one shown in this file.
The properties managed on this widget’s state include a color and counter. The methods _increment and _decrement make use of the setState method to increment or decrement the counter. The _showPanel method requests an instance of ColorPanel from the imported plugin, and then invokes show on it, which will request a native color picker from the operating system. When a color is chosen, setState is used to update the widget’s state with a new color, which will queue it up to be redrawn by the Flutter engine.
The build method for this widget sets up theme and style data and requests the OS name, local hostname, and number of processor cores from Platform class. These could be initialized directly on properties designated as final, or even placed into an external file and used as a service, but for this demo app they’re local variables placed in the widget’s build method for simplicity.
The widget returned by the build method is a Scaffold, with an AppBar and a body comprised of a horizontal row of two columns. The first (left-hand) column contains a few buttons which are mapped to the increment, decrement, and color-selection methods described above. The second column displays the local machine info gathered previously along with the counter, in the color selected by the user (or default if one hasn’t been selected yet).
Conclusion
Flutter desktop embedding is under active development and will continue to be improved over the coming months and years, offering the same excellent UI development experience enjoyed by mobile devs to those who want to build desktop applications. More plugins will become available in the near future, and deeper OS integration will likely be included over time.
Thanks for reading and good luck with your next Flutter project!
Kenneth Reilly (8_bit_hacker) is CTO of LevelUP
