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…
There are several things that must be prepared to create a desktop application with Flutter:
- 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
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.
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:
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.
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:
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.
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.