• 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
      • How to Install Flutter on Windows, macOS and Ubuntu
      How to Install Flutter on Windows, macOS and Ubuntu

      How to Install Flutter on Windows, macOS and Ubuntu

      • Posted by Shivam Srivastava
      • Categories Developers, Dart, Flutter, Flutter Desktop, Flutter Mobile, Flutter Web
      • Date April 11, 2022
      • Comments 0 comment
      Spread the love
      Contents hide
      1 Introduction
      2 How to install Visual Studio Code
      2.1 Install VS Code on Windows
      2.2 Install VS Code on macOS
      2.3 Install VS Code on Ubuntu
      3 How to install Flutter on MacOS
      3.1 1. Install Flutter SDK on macOS
      3.2 2. Install XCode for iOS and macOS development
      3.3 3. Configure Flutter for macOS apps
      3.4 4. Run First MacOS Flutter Desktop App
      3.5 5. Release Flutter Desktop app for MacOS
      4 How to install Flutter on Ubuntu
      4.1 1. Install Flutter SDK on Ubuntu
      4.2 2. Configure Flutter for Linux apps
      4.3 3. Install Extra tool required in Linux
      4.4 4. Run First Linux Flutter Desktop App
      4.5 5. Release Flutter Desktop app for Ubuntu
      5 How to install Flutter on Windows
      5.1 1. Install Flutter SDK on Windows
      5.2 2. Configure Flutter for Windows apps
      5.3 2. Install Visual Studio for Windows app development
      5.4 3. Run First Windows Desktop App
      5.5 4. Release Desktop app for Windows
      6 Tips
      7 Example app – Navoki Notes
      8 Conclusion
      8.1 Please login to bookmark


      Introduction

      Flutter app development is also supported on desktop, and we can make cross-platform 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 an excellent example of such an app made with Flutter. 

      This article will talk about the Flutter desktop (Linux, Windows, macOS). This blog will explain how to set up the Flutter framework in Linux, Windows, and macOS and create a simple counter application using VSCode for testing purposes. If something goes wrong in the flutter setup, watch the video here. 



      How to install Visual Studio Code

      Vscode Logo
      Install Visual Studio Code

      Install VS Code on Windows

      1. DOWNLOAD VSCode to use as IDE and create Flutter project.
      2. Install setup VSCodeUserSetup-x64 on windows and then launch this app.
      3. Add Flutter SDK support in VSCode by installing 2 extensions. Search Flutter and Dart respectively and then re-start VSCode.
      Vscode Flutter Extension
      Install Flutter extension for VsCode

      Install VS Code on macOS

      1. DOWNLOAD VSCode as IDE to create Flutter project.
      2. Unzip VSCode-darwin-universal.zip
      3. Copy the Visual Studio Code.app to /Application and from here you can launch this app.
      4. Add Flutter SDK support in VSCode by installing 2 extensions. Search Flutter and Dart respectively and then re-start VSCode.

      Install VS Code on Ubuntu

      1. DOWNLOAD VSCode as IDE to create Flutter project.
      2. Open Terminal on folder where .deb file downloaded.
      3. To install run command sudo dpkg -i <file-name>.deb
      4. Add Flutter SDK support in VSCode by installing 2 extensions. Search Flutter and Dart respectively and then re-start VSCode.

      How to install Flutter on MacOS

      Apple Logo
      apple logo

      1. Install Flutter SDK on macOS

      1. Got to flutter.dev and download the latest .zip file for macOS
      2. Extract the content to desire folder using
      unzip ~/Downloads/<file-name>.zip

      3. Add the flutter sdk as environment variable, set 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. Run below command

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

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

       flutter doctor -v

      5. You will get below output. In code snippet you can see the XCode is the requirement since, I have already installed so its showing a tick mark. If you don’t have XCode installed then follow next point.

      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 for iOS and macOS development

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

      Install Xcode From App Strore
      Install xcode from app strore


      3. Configure Flutter for macOS apps

      1. Before proceeding make sure to updated Flutter SDK using
      flutter upgrade

      2. Till now flutter SDK will work for iOS app development. Enable Desktop support is required in SDK to support macOS desktop app development 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. Below command will create a flutter project and add support for macOS desktop app
       flutter create .


      2. 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.

      Flutter Desktop Project
      Flutter desktop counter app project


      3. Open Terminal, within project path and type below command to run and launch Flutter Desktop App for MacOS. In command-d means to run in specific device, macos is your device name. You can get device list names using flutter devices.

       flutter run -d macos


      Flutter Desktop Counter Macos App
      Flutter desktop counter macos app


      5. Release Flutter Desktop app for MacOS

      1. To create a macos executable file (.app), run command
       flutter build macos

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

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


      How to install Flutter on Ubuntu

      Ubuntu | How To Install Flutter On Windows, Macos And Ubuntu
      ubuntu logo

      1. Install Flutter SDK on Ubuntu

      1. Download Flutter SDK for Linux and extract downloaded file on your desired location.
      2. Open extracted flutter folder up to ~/flutter/bin, then open terminal at 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. Flutter SDK path need to be set as environment variable in .bashrc file, be careful when working with this file because it contains all the system configuration.

      4. 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 the PATH as shown below, add this line at the bottom of file and save it.

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


      5. Upgrade flutter SDK using flutter upgrade


      2. Configure Flutter for Linux apps

      1. Switch channel in flutter sdk to master channel, using command
       flutter channel master

      2. Enable Desktop support is required in SDK to support Linux desktop app development and then restart your terminal

      flutter config --enable-linux-desktop

      3. Check configuration for desktop development and 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. Install Extra tool required in Linux

      1. To support Flutter desktop app development in linux following addition is required in system.
        1. Clang
        2. CMake
        3. GTK development headers
        4. Ninja build
        5. pkg-config
        6. liblzma-dev This might be necessary
      2. Before proceeding make sure you OS is up to date or update using sudo apt-get update
      3. Install clang latest version on linux use command
      sudo apt install clang


      2. Install cmake latest version on linux.

      sudo apt-get install cmake


      3. Install ninja latest version on linux.

      sudo apt-get install ninja


      4. Install pkg-config latest version on linux.

      sudo apt-get install pkg-config


      4. Run First Linux Flutter 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

      Flutter Desktop App Linux
      flutter desktop app linux


      5. Release Flutter Desktop app for Ubuntu

      1. Run below command to generate linux executable file.
      sudo build linux

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



      How to install Flutter on Windows

       Windows Logo
      windows logo

      1. Install Flutter SDK on Windows

      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. 3. Upgrade flutter sdk using flutter upgrade

      2. Configure Flutter for Windows apps

      1. Switch flutter sdk to master channel, using command
       flutter channel master

      2. Enable Desktop support is required in SDK to support windows desktop app development and then restart your 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 for Windows app development

      Flutter Requirement For Windows Visual Studio
      Flutter requirement for windows visual studio

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

      2. Select and Install 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

      1. First method, use msix package, it uses Windows app packaging format from Microsoft that combines the best features of MSI, .appx, App-V, and ClickOnce to provide a modern and reliable packaging experience. Follow instruction at msix
      flutter pub run msix:create

      2. Second method, Official method tTo make Software Installer for Flutter Desktop App for Windows . You can build exe file using command

       flutter buid macos

      Learn more flutter commands, save this link as bookmark 14 Flutter Commands a Developer must know, Cheat Sheet.


      Tips

      1. If any error occurred mention full details of error and contact thru Discord or 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 .

      Example app – Navoki Notes

      Flutter_Cross_Platform_App_Navoki_Notes
      Sample app for Flutter desktop


      Conclusion

      Now Flutter desktop app development 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 as an example project.

      Subscribe to our Youtube channel.

      Join our Discord Community

      Bookmark(0)

      Please login to bookmark

      Continue with Google
      0

      Tag:flutter app development, flutter desktop linux app, flutter desktop macos app, flutter desktop tutorial, flutter download, flutter for desktop, flutter macos desktop app, flutter plugin macos, flutter sdk path, flutter tutorial, flutter tutorial for beginners android studio, flutter windows desktop app, how to create desktop application, how to install flutter on mac, how to install flutter on ubuntu, how to install flutter on windows

      • Share:
      author avatar
      Shivam Srivastava

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

      Previous post

      [SOLVED] Warning: Mapping new ns to old ns
      April 11, 2022

      Next post

      How Incoming Video Call Notification works in Flutter
      April 15, 2022

      You may also like

      everything-about-flutter-3-in-google-i-o-2022 navoki.com
      Everything about Flutter 3 in Google I/O 2022
      12 May, 2022
      Flutter-Web-CORS-Error-SOLVED-Navoki.com
      [SOLVED] Flutter Web CORS Error
      4 May, 2022
      How Video Call works in Flutter
      How Incoming Video Call Notification works in Flutter
      15 April, 2022

      Leave A Reply Cancel reply

      You must be logged in to post a comment.


      Categories

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

      Recent Post

      • Everything-About-Flutter-3-In-Google-I-O-2022 Navoki.comEverything about Flutter 3 in Google I/O 2022
      • Flutter-Web-Cors-Error-Solved-Navoki.com[SOLVED] Flutter Web CORS Error
      • How Video Call Works In FlutterHow Incoming Video Call Notification works in Flutter

      Subscribe Now

       

      Recent Courses

      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

      Variables In Dart Programming Language

      Variables in Dart Programming language

      View All

      DON’T MISS
      FLUTTER UPDATES

      Be the first to know when our blog is published.

      flutter-mobile-mockup

      Check your inbox or spam folder to confirm your subscription.

      Contact

      •   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

      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

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

      Are you a member? Login now

      We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.OkPrivacy policy