[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
![[UPDATED] Setup Flutter Desktop on Windows, Linux, macOS using VSCode and Build and Release - Flutter Tutorial | Navoki vs code logo](https://navoki.com/wp-content/uploads/2021/01/vscode-min.jpg)
- DOWNLOAD VSCode as IDE that we will use in all environments to make Flutter project.
- Move this VS Code application to
/Applications
, from here you can launch this app. - Add Flutter SDK support in VSCode by installing 2 extensions. Search Flutter and Dart respectively then re-start VSCode.
![[UPDATED] Setup Flutter Desktop on Windows, Linux, macOS using VSCode and Build and Release - Flutter Tutorial | Navoki VSCODE flutter extension](https://navoki.com/wp-content/uploads/2020/04/fluuterSetupVSCODE-1024x553.png)
MacOS install
![[UPDATED] Setup Flutter Desktop on Windows, Linux, macOS using VSCode and Build and Release - Flutter Tutorial | Navoki apple_logo](https://navoki.com/wp-content/uploads/2021/01/apple_logo_min-min.jpg)
1. Install Flutter SDK
- Got to flutter.dev and download the latest .zip file for macOS
- 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
- 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.
![[UPDATED] Setup Flutter Desktop on Windows, Linux, macOS using VSCode and Build and Release - Flutter Tutorial | Navoki xcode_app store link](https://navoki.com/wp-content/uploads/2021/01/xcode_app-store-min-1024x679.jpg)
3. Flutter configuration in MacOS
- 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
- 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.
![[UPDATED] Setup Flutter Desktop on Windows, Linux, macOS using VSCode and Build and Release - Flutter Tutorial | Navoki macos flutter desktop project](https://navoki.com/wp-content/uploads/2021/01/macos-flutter-desktop-project-1024x657.jpg)
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
![[UPDATED] Setup Flutter Desktop on Windows, Linux, macOS using VSCode and Build and Release - Flutter Tutorial | Navoki macos flutter desktop app](https://navoki.com/wp-content/uploads/2021/01/macos-flutter-desktop-app-min.jpg)
5. Release Desktop app for MacOS
- 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
![[UPDATED] Setup Flutter Desktop on Windows, Linux, macOS using VSCode and Build and Release - Flutter Tutorial | Navoki ubuntu logo](https://navoki.com/wp-content/uploads/2021/01/ubuntu.png)
1. Install Flutter SDK
- Download Flutter for Linux and extract downloaded flutter file on your desired location.
- Open extracted flutter folder up to
~/flutter/bin
, then open terminal this location and type a commandpwd
, 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
- 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
- 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
![[UPDATED] Setup Flutter Desktop on Windows, Linux, macOS using VSCode and Build and Release - Flutter Tutorial | Navoki linux flutter desktop app](https://navoki.com/wp-content/uploads/2021/01/linux-flutter-desktop-app-min-1024x671.jpg)
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
![[UPDATED] Setup Flutter Desktop on Windows, Linux, macOS using VSCode and Build and Release - Flutter Tutorial | Navoki windows min 1 | [UPDATED] Setup Flutter Desktop on Windows, Linux, macOS using VSCode and Build and Release - Flutter Tutorial](https://navoki.com/wp-content/uploads/2021/01/windows-min-1.jpg)
1. Install Flutter SDK
- Download Flutter for Windows and extract downloaded flutter files on your desired location.
- 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
- 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
![[UPDATED] Setup Flutter Desktop on Windows, Linux, macOS using VSCode and Build and Release - Flutter Tutorial | Navoki visual studio flutter desktop windows min 1 | [UPDATED] Setup Flutter Desktop on Windows, Linux, macOS using VSCode and Build and Release - Flutter Tutorial](https://navoki.com/wp-content/uploads/2021/01/visual-studio-flutter-desktop-windows-min-1-1024x574.jpg)
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
- 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
- Git should be installed on your system
- Check you target device can be detected by flutter sdk by running command
flutter devices
- Environment PATH should be set properly, run
flutter doctor
to check path is set - Update you Flutter SDK using command
flutter upgrade
- Good practice is to mention you target device name while running flutter app like
flutter run -d macos
- 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.
Tag:flutter desktop app example, flutter desktop embedding, flutter desktop linux app, flutter desktop macos app, flutter desktop tutorial, flutter for desktop, flutter macos desktop app, flutter plugin macos, flutter sdk path, flutter tutorial for beginners android studio, flutter windows desktop app, how to create desktop application