Tutorial on Creating Desktop Applications with Flutter

Read Also

Tutorial on Creating Desktop Applications with Flutter - Flutter is a young framework, but it develops very fast. Initially created to facilitate the creation of UI for mobile applications (Android and iOS).

Flutter can now be used to create applications for various platforms ...

Ranging from mobile applications, the web, to the desktop.

Also read: How to Make Web Applications with Flutter.

On this occasion, we will learn how to create a desktop application with Flutter.

Let's get started…

Initial Preparation

There are several things that must be prepared to create a desktop application with Flutter:

• Git;
• The latest version of Flutter (^ 1.6.1);
• VS Code or Android Studio for coding;
• Some Tools and Environment setup.

Upgrade Flutter to the Latest Version

Make sure Flutter is installed on your computer
After that, upgrade to the latest version, use the master channel to get the latest version.

Type the following command in the terminal or CMD:
# change channel to master
flutter channel master

# flutter version upgrade
flutter upgrade

Wait until the process is complete ...

Note: Channel master provides the latest version, but an unstable version. To use the stable version of Flutter, we must change it back to the stable channel with the command:
flutter channel stable.

Install VS Code or Android Studio

We can use the VS Code or Android Studio to create applications with Flutter.

Please choose one…

Using VS Code for Coding Flutter
Use Android Studio for Coding Flutter

Setup Tools and Environment

Some tools that must be prepared: https://github.com/google/flutter-desktop-embedding

• Linux: the latest version of GCC (^ 7.4.0);
• macOS: Latest Xcode version;
• Windows: Visual Studio 2017 or 2019 with C ++ development support.

In this tutorial, I will use Linux Kubuntu 18.04. That is, I need GCC. GCC (GNU Compiler Collection) is a package that contains a compiler for C / C ++ / Objective-C, etc.

Following is the command to install GCC on Linux:

sudo apt install gcc

After that, type gcc --version to check the installed version.

Next, we need to create an environment variable with ENABLE_FLUTTER_DESKTOP and the contents are true.

On Linux, please make it in the ~/.bashrc file with export.

export ENABLE_FLUTTER_DESKTOP=true

So it becomes like this:

For Fish Shell users, please create an environment variable in the .config/fish/config.fish file with the following command.

set -x ENABLE_FLUTTER_DESKTOP true

For Windows users, the Env variable can be created via Properties->Advenced->Environment Variable.

Please do a search, then type env.

Then click on Environment Variables

Create a new variable with the name ENABLE_FLUTTER_DESKTOP and is true.

So it will be like this:

After that, try typing the following command:

flutter doctor
flutter devices

If it appears like this:

Then our computer is ready to use to make the Flutter application.

Creating Desktop Applications with Flutter

Flutter does not yet provide commands for creating desktop applications, because it is currently still in an experimental stage.

Maybe in the future, it will be provided, so we can use the flutter create command to start creating desktop applications.

For now, we can use a sample repository from Github.

Please clone to local, type the following command:

git clone --depth 1 https://github.com/google/flutter-desktop-embedding.git

Then open the example folder in flutter-desktop-embedding with the VS Code text editor.

The example folder in the flutter-desktop-embedding repository is a sample structure of desktop application projects with Flutter.

If you are going to create a new project, you can copy all the contents of this folder.

If we pay attention, the directory structure is almost the same as mobile and web applications.

In the desktop application, there are Linux, macos, and Windows directories. Whereas on mobile there are Android and ios folders.

Run the Flutter Application on the Desktop

Without changing anything, we just try to run the Flutter application on the Desktop. But before doing that, there are some rituals that must be performed.

First, install all the packages needed.

How:

Open the terminal in VS Code, then type the command:

flutter packages get

Wait until the process is complete.

Second, install build tools. Type the following command:

flache precache --linux

For you who use an OS other than Linux, please change the --linux flag to --windows for Windows and --macOS for MacOS users.

The commands above are typed only once at the beginning. Then we won't type it again unless we install a new package. Then you have to type flutter packages get to get the package from the internet.

Finally, type the command:

flutter run

To run the application.

Wait until the process is complete ...

... a new window will appear.

Build Flutter Application

Okay now let's build the application.

Please type the following command:

Build for Linux:

flutter build linux

Build for Windows:

flutter build windows

Build for MacOS:

flutter build macos

Wait until it's done.

The result:

There will be a new folder in the build folder called Linux (according to the target build) and in it, there is a release folder that contains binary files, libraries, and data.

We can directly execute this binary file, just try 2x. Then the application will open.

On Windows, this file will have an .exe extension.

Then we can distribute this binary file to the user.

Usually packaged in the form of a .deb file for Debian family Linux distributions and .appimage for all Linux distributions.