Flutter for Desktop
Tags: flutter, crossplatform
Published: 2019-12-21 22:35:16

---
title: Flutter for Desktop
published: true
description: a desktop application using flutter 
tags: flutter,cross-platform,
---

**EDITED**

So with all of this cross-platform trend that is going on 🤩, Flutter is setting some greater standards compared to other frameworks. The main added advantage is that it compiles  **directly to machine code**.

Let's see how it's done on Flutter for desktop applications 😁. Since the feature has not been standardised it's available in the **master** branch of the [repo](https://github.com/flutter/flutter/).

Clone the repo into folder like `/etc/bin` for linux, or `C:\Program Files\` for windows.
```
git clone https://github.com/flutter/flutter.git
```
If you have to checkout other versions, you can list out the remote branches and checkout and use them.

```
git branch -a #will list out branches
git checkout <your-specific-branch>
```
After cloning, add the bin folder path along with the prefix to environment variables
* Linux `export PATH=$PATH:<your-flutter-path>/flutter/bin`
* Windows `setx PATH="%path%;<your-flutter-path/flutter/bin>"`

Make sure to add it in **.bashrc** for linux and **environment variables console** for windows. This will store the path permanently.

Now see that if you're able to access the *flutter-cli* 
`flutter --version`
This command install some binaries for flutter later printing out the version. Mine was 1.13.5 at the time of writing.
```
Flutter 1.13.5-pre.11 • channel master • https://github.com/flutter/flutter.git
Framework • revision 72a3d914ee (6 hours ago) • 2019-12-20 08:50:42 -0800
Engine • revision 472197a8e9
Tools • Dart 2.8.0 (build 2.8.0-dev.0.0 8d11c1dce6)
```
Now let's check if it has all dependencies to run desktop application.  For this we need to run
```
#Prints out devices if available for desktop
flutter devices
1 connected device:

Windows • Windows • windows-x64 • Microsoft Windows [Version 10.0.18362.535]
```
Now, let's see if the toolchain to build application is ready.
```
#This'll run a basic diagnosis on the requirements
flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel master, v1.13.5-pre.11, on Microsoft Windows [Version 10.0.18362.535], locale en-IN)
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.1)
    X Android license status unknown.
      Try re-installing or updating your Android SDK Manager.
      See https://developer.android.com/studio/#downloads or visit https://flutter.dev/setup/#android-setup for detailed
      instructions.
[!] Visual Studio - develop for Windows (Visual Studio Community 2019 16.2.2)
    X Visual Studio is missing necessary components. Please re-run the Visual Studio installer for the "Desktop
      development with C++" workload, and include these components:
        MSBuild
        MSVC v142 - VS 2019 C++ x64/x86 build tools
       - If there are multiple versions, install the latest one
        Windows 10 SDK (10.0.17763.0)
[√] Android Studio (version 3.5)
[√] VS Code (version 1.41.1)
[√] Connected device (1 available)

! Doctor found issues in 2 categories.
```
In my case i was missing three dependencies to build desktop applications which are
-  windows 10 SDK
- MSBUILD
- MSVC V142

Start Visual studio Installer. Select modify option under Visual Studio 2019. 
Then  select the following components.

![build options](https://i.imgur.com/rG4TMw8.png)

Also make sure to select the option  include MSVC v142
![msvc v142](https://i.imgur.com/KAPxIgS.png)

Now click on modify to begin the installation process. Once the installation process is done. Run flutter doctor to see if everything is good.

Once the installation is done. Re-run the flutter doctor to see if everything is as expected.
```
flutter doctor
[√] Flutter (Channel master, v1.13.5-pre.11, on Microsoft Windows [Version 10.0.18362.535], locale en-IN)
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.1)
    X Android license status unknown.
      Try re-installing or updating your Android SDK Manager.
      See https://developer.android.com/studio/#downloads or visit https://flutter.dev/setup/#android-setup for detailed
      instructions.
[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.4.2)
[√] Android Studio (version 3.5)
[√] VS Code (version 1.41.1)
[√] Connected device (1 available)

! Doctor found issues in 1 category.
```
So leaving the android toolchain, Let's run our first project flutter desktop. Let's create a flutter project. Move into directory where you'd like to have the source code of the application or place where you think is suitable for your playground.
Since the `flutter create` command is supported only for macOS we need make use of an example repo which has modified template that includes for windows for linux.

```
git clone https://github.com/google/flutter-desktop-embedding desktop_app
```

Now let's enable desktop feature for our project.
-   `flutter config --enable-linux-desktop`  to enable Linux.
-   `flutter config --enable-macos-desktop`  to enable macOS.
-   `flutter config --enable-windows-desktop`  to enable Windows.

After enabling the feature, that actually sets environment variable.  Now cd into the project folder and into a folder name example
`cd desktop_app/example`

In the project tree you can find folder specific to windows and linux which contains configurations for desktop application specific to platform which are not stable and yet to change as said by the flutter team.

	├───fonts
	│   └───Roboto
	├───lib
	├───linux
	│   └───flutter
	├───macos
	│   ├───Flutter
	│   ├───Runner
	│   │   ├───Assets.xcassets
	│   │   │   └───AppIcon.appiconset
	│   │   ├───Base.lproj
	│   │   └───Configs
	│   ├───Runner.xcodeproj
	│   │   ├───project.xcworkspace
	│   │   │   └───xcshareddata
	│   │   └───xcshareddata
	│   │       └───xcschemes
	│   └───Runner.xcworkspace
	│       └───xcshareddata
	├───test
	└───windows
	    ├───flutter
	    ├───resources
	    └───scripts

Now let's build the application and see how it looks.
```
flutter run
```

Once finishing build, the application starts and you can edit to see your changes reflect.
You need to make changes in `lib\main.dart` file.
Focus the terminal and enter `r key` refreshes the application..

![Windows App](https://i.imgur.com/nFwxZMo.png)

Hope you loved the article 🤗, comment your thoughts and feel free ask any doubts in comments. 
🏇 Actually here i'm starting on my journey with Flutter.