[UPDATED] Setup Flutter Desktop on Windows, Linux, macOS using VSCode and Build and Release – Flutter Tutorial

Introduction

Flutter is Google’s framework used by developers for making Android and iOS apps a single codebase. Nowadays, we can make hybrid apps using Flutter, which means we can run a flutter app on all the platforms, i.e., Android, iOS, Web, and Desktop. Navoki Notes an Open Source App is a great example of such an app made with Flutter.

This blog doesn’t focus on what’s Flutter but Flutter tutorial for beginners to installation in Linux, Windows, and Mac operating systems. The following steps are there to be followed for prospering installation.

In this article, we will talk about Flutter desktop (Linux, Windows, macOS). I will explain how to set up the Flutter framework in Linux, Windows, and macOS and create a simple counter application by using VSCode for testing purposes. You can again watch the video here. 

Visual Studio Code

1. DOWNLOAD VSCode as IDE that we will use in all environments to make Flutter project.
2. Move this VS Code application to /Applications, from here you can launch this app.
3. Add Flutter SDK support in VSCode by installing 2 extensions. Search Flutter and Dart respectively then re-start VSCode.
   
   

MacOS install

1. Install Flutter SDK

1. Got to flutter.dev and download the latest .zip file for macOS
2. Extract the content to desire folder using

unzip ~/Downloads/flutter_macos_1.22.5-stable.zip

3. Add the flutter sdk path location (<directory>/flutter/bin) to your path so that Terminal and IDE can find flutter sdk, after this you need to restart your terminal.

 export PATH="$PATH:`pwd`/flutter/bin"

4. Now, to check flutter is working properly and meets system software requirement for flutter desktop macos development, run command

 flutter doctor -v

5. You will get this output, here you can see the XCode is requirement since, I have already installed so its showing a tick mark.

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 1.22.2, on Mac OS X 10.15.6 19G73, locale en-IN)
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for
      more details.
 
[✓] Xcode - develop for iOS and macOS (Xcode 12.0)
[!] Android Studio (version 4.1)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] VS Code (version 1.47.2)
[!] Connected device
    ! No devices available

2. Install XCode

1. XCode is necessary for iOS and macOS development. Install Latest XCode version from App Store, it will install SDK and tools required for iOS and MacOS desktop development.
   
   

3. Flutter configuration in MacOS

1. Before proceeding make sure all steps above are complete, then switch to master channel of SDK.

 flutter channel master

2. After this make sure to update Flutter SDK using flutter upgrade

3. Till now we did flutter setup is for iOS/Mobile development. Enable Desktop support in SDK and then restart your terminal.

 flutter config --enable-macos-desktop

4. Run First MacOS Flutter Desktop App

1. Create New Flutter project in your desired directory. This will create a flutter project and add support for macOS desktop app

 flutter create .

2. If see the project structure, lib folder contains you common code of Dart and Flutter code, while macos folder contains native code required by Desktop App. You don’t need to change anything in macos folder.

3. Now in Terminal at within project path type common to run and launch Flutter Desktop App for MacOS. Here -d means to run in specific device, macos is your device name. You can get device list using flutter devices.

 flutter run -d macos

5. Release Desktop app for MacOS

1. To create a macos executable file, run command

 flutter buid macos

2. Generated file will be in build/macos/Build/Products/Release folder

NOTE: Releasing an app requires more steps like necessary permissions required in app, Logo change, App Store compliance etc.

Ubuntu Install

1. Install Flutter SDK

1. Download Flutter for Linux and extract downloaded flutter file on your desired location.
2. Open extracted flutter folder up to ~/flutter/bin, then open terminal this location and type a command pwd, this command will give your path of the current location, copy this path.

[email protected]:~/Downloads/flutter/bin$ pwd
/home/navoki/Downloads/flutter/bin

3. Now we are updating flutter path in .bashrc file, be careful when working with this file because it contains all the system configuration. Go to your home directory and open .bashrc file, by default .bashrc file hide for unhiding this file just press Ctrl + H in-home directory. Update your path as shown below, add this line at the bottom of your file and modify which you copied.

export PATH={path-of-sdk}/flutter/bin:$PATH

4. Upgrade flutter sdk using flutter upgrade

2. Flutter configuration in Linux

1. Switch flutter sdk to master branch, using command

 flutter channel master

2. Now enable flutter for desktop, run below command on the terminal.

flutter config --enable-linux-desktop

3. To check flutter sdk configuration for desktop development run command flutter doctor -v, which will give output like this

[✓] Flutter (Channel master, 1.26.0-13.0.pre.122, on Linux, locale en_US.UTF-8)
    • Flutter version 1.26.0-13.0.pre.122 at /home/shivam/snap/flutter/common/flutter
    • Framework revision e599cdd414 (35 minutes ago), 2021-01-22 11:07:08 -0800
    • Engine revision 90641fa923
    • Dart version 2.12.0 (build 2.12.0-248.0.dev)

[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/linux#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.


[✗] Chrome - develop for the web (Cannot find Chrome executable at google-chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.

[✓] Linux toolchain - develop for Linux desktop
    • clang version 6.0.0-1ubuntu2 (tags/RELEASE_600/final)
    • cmake version 3.10.2
    • ninja version 1.8.2
    • pkg-config version 0.29.1

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/linux#android-setup for detailed instructions).

[✓] Connected device (1 available)
    • Linux (desktop) • linux • linux-x64 • Linux

! Doctor found issues in 3 categories.

4. In Linux , you need to install extra library for linux desktop support

3. Extra tool in Linux

Before proceeding make sure you OS is up to date or update using sudo apt-get update

1. Install clang latest version, using command

sudo apt install clang

2. Install cmake latest version.

sudo apt-get install cmake

3. Install ninja latest version.

sudo apt-get install ninja

4. Install pkg-config latest version.

sudo apt-get install pkg-config

4. Run First Linux Desktop App

Running a desktop app is same for all platform with small difference. Open terminal and type below command launch an app

flutter run -d linux

5. Release Desktop app for Ubuntu

The process for release app is lengthy, you can build and publish linux desktop on SnapStore. Watch in details Flutter Desktop Linux app | Build and Publish on Snapcraft Store on Navoki Youtube Channel ,

Windows Install

1. Install Flutter SDK

1. Download Flutter for Windows and extract downloaded flutter files on your desired location.
   
2. Open extracted flutter folder up to ~/flutter/bin, then set PATH variable in your system ,follow these steps to set a Environment variable

3. Upgrade flutter sdk using flutter upgrade

2. Flutter configuration in Windows

1. Switch flutter sdk to master branch, using command

 flutter channel master

2. Now enable flutter for desktop, run below command on the terminal.

flutter config --enable-windows-desktop

3. To check flutter sdk configuration for desktop development run command flutter doctor -v, which will give output like this

[✓] Flutter (Channel master, 1.26.0-13.0.pre.122, on Linux, locale en_US.UTF-8)
    • Flutter version 1.26.0-13.0.pre.122 at /home/shivam/snap/flutter/common/flutter
    • Framework revision e599cdd414 (35 minutes ago), 2021-01-22 11:07:08 -0800
    • Engine revision 90641fa923
    • Dart version 2.12.0 (build 2.12.0-248.0.dev)

[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/linux#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.


[✗] Chrome - develop for the web (Cannot find Chrome executable at google-chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.

[✓] Linux toolchain - develop for Linux desktop
    • clang version 6.0.0-1ubuntu2 (tags/RELEASE_600/final)
    • cmake version 3.10.2
    • ninja version 1.8.2
    • pkg-config version 0.29.1

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/linux#android-setup for detailed instructions).

[✓] Connected device (1 available)
    • Linux (desktop) • linux • linux-x64 • Linux

! Doctor found issues in 3 categories.

2. Install Visual Studio

1. In Windows, you need to install Visual Studio for Windows desktop support

2. Select Desktop development with C++ including its default components selected at setup screen.

3. Run First Windows Desktop App

Running a desktop app is same for all platform with small difference. Open terminal and type below command launch an app

flutter run -d windows

4. Release Desktop app for Windows

NON- Official method to make Software Installer for Flutter Desktop App for Windows . You can build exe file using command

 flutter buid macos

Tips

1. If any error occurred mention full details of error and contact thru Chat Window on right bottom of this page 👉. I will reply as soon as possible
2. Git should be installed on your system
3. Check you target device can be detected by flutter sdk by running command flutter devices
4. Environment PATH should be set properly, run flutter doctor to check path is set
5. Update you Flutter SDK using command flutter upgrade
6. Good practice is to mention you target device name while running flutter app like flutter run -d macos
7. Add support for specific platform in flutter, flutter create --platforms=windows .

Conclusion

Now your setup is ready you can make Dialog box, listview in flutter and it will show in desktop app. You can try my projects Navoki Notes or Single and Multi Selection ListView in Flutter. Subscribe to our Youtube channel.