• Courses
  • YouTube
  • Dev News
  • Technology
  • Blogs
  • Flutter Jobs
  • Contact
    • About Us
    • RegisterLogin
    Navoki
    • Courses
    • YouTube
    • Dev News
    • Technology
    • Blogs
    • Flutter Jobs
    • Contact
      • About Us
    • RegisterLogin

      Developers

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

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

      • Posted by Shivam Srivastava
      • Categories Developers, Flutter, Flutter Desktop
      • Date April 2, 2020
      • Comments 0 comment


      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.

      flutter_cross_platform_app_navoki_notes


      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

      vs code logo
      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.

      VSCODE flutter extension


      MacOS install

      apple_logo

      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.

      xcode_app store link


      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.

      macos flutter desktop project


      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


      macos flutter desktop  app


      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

      ubuntu logo

      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

      linux flutter desktop  app


      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

      windows min 1 | [UPDATED] Setup Flutter Desktop on Windows, Linux, macOS using VSCode and Build and Release - Flutter Tutorial

      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

      visual studio flutter desktop windows min 1 | [UPDATED] Setup Flutter Desktop on Windows, Linux, macOS using VSCode and Build and Release - Flutter Tutorial

      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.

      Bookmark(0)

      Please login to bookmark

      Continue with Google
      Continue with Facebook
      0

      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

      • Share:
      Shivam Srivastava
      Shivam Srivastava

      Mobile Solution [email protected], Android and Flutter Dev, Dart ,Founder of @Navoki, Instructor

      Previous post

      Flutter Platform Channel
      April 2, 2020

      Next post

      Google Provides Code Search for TensorFlow, Flutter, Dart, Angular, Go and more
      April 4, 2020

      You may also like

      whats-new-in-flutter-2.0.0
      Flutter 2 is here | What’s new in Flutter 2.0.0
      22 March, 2021
      Flutter Commands a Developer must know, Cheat Sheet
      14 Flutter Commands a Developer must know, Cheat Sheet
      28 January, 2021
      6 Things About HTTP Request in Dart For Beginners-min
      6 Things About HTTP Request in Dart For Beginners
      7 September, 2020

      Leave A Reply Cancel reply

      You must be logged in to post a comment.


      Categories

      • Android
      • Dart
      • Developers
      • Flutter
      • Flutter Desktop
      • Flutter Mobile
      • Flutter Web
      • Fuchsia
      • Go Lang
      • Technology
      • Uncategorized

      Recent Post

      • whats-new-in-flutter-2.0.0Flutter 2 is here | What’s new in Flutter 2.0.0
      • Flutter Commands a Developer must know, Cheat Sheet14 Flutter Commands a Developer must know, Cheat Sheet
      • 6 Things About HTTP Request in Dart For Beginners min | 6 Things About HTTP Request in Dart For Beginners6 Things About HTTP Request in Dart For Beginners

      Subscribe Now

       

      Social Connect

      Recent Courses

      Flutter App Development Course Online

      Flutter App Development Course Online

      Single and Multi Selection ListView in Flutter

      Single and Multi Selection ListView in Flutter

      Go Installation and Variables

      Go Installation and Variables

      List in Dart Programming language

      List in Dart Programming language

      View All

      DON’T MISS A BEAT

      Be the first to know when our album is released on iTunes and Spotify

      We don’t spam! Read our privacy policy for more info.

      Check your inbox or spam folder to confirm your subscription.

      Contact

      •   [email protected]
      •   Navoki Technologies Pvt. Ltd.
        JMD Megapolis , Sector 48, Gurugram, Haryana 122018

      Company

      • About Us
      • Blogs
      • Contact
      • Privacy policy
      • Terms & Condition

      Useful Links

      • Courses
      • Youtube
      • Dev News

      Mobile

      Click and Get started in seconds

      "Navoki" is a registered trademark of Navoki.com ® 2020–2030 Navoki Technologies Pvt Ltd.

      • Terms & Condition

      Login with your site account

      Continue with Google
      Continue with Facebook

      By "Sign in” above to accept Navoki’s Terms of Service & Privacy Policy.

      Not a member yet? Register now

      Register a new account

      Continue with Google
      Continue with Facebook

      By "Sign Up” above to accept Navoki’s Terms of Service & Privacy Policy.

      Are you a member? Login now