DEV Community

Afroze Kabeer Khan. M
Afroze Kabeer Khan. M

Posted on

Flutter for Desktop

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.

Clone the repo into folder like /etc/bin for linux, or C:\Program Files\ for windows.

git clone https://github.com/flutter/flutter.git
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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

Also make sure to select the option include MSVC v142
msvc v142

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.
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

flutter run
Enter fullscreen mode Exit fullscreen mode

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

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.

Top comments (9)

Collapse
 
erebos-manannan profile image
Erebos Manannán

I'm sorry but this post is really poorly written. It's making a lot of weird assumptions and not explaining a lot of things in not enough detail. Add to that you've got some really weird ideas here.

Clone the repo into folder like /etc/bin for linux, or C:\Program Files\ for windows.

You should never install anything to /etc/bin, that's not a standard location, you should definitely not check out any Git repos to c:\Program Files. If you're checking out Git repos try $HOME/src or C:\Source or %USERPROFILE%\Documents\source or whatever else but do not use system folders for things they are not intended for.

Then you jump into this:

Rerun the Microsoft visual studio Build tools. Select modify option.
Then select the following components.

Rerun what? You've not explained anything about how to install it the first time. I know how to install it, you might know how to install it, many people reading this have no clue what you're talking about.

degit google/flutter-desktop-embedding desktop_app

Suddenly assuming people have installed I guess the degit NPM package globally?

It's great that you try to write guides for cool things like Flutter, but please, try and double check what you write is actually generic and explained.

Collapse
 
droidmakk profile image
Afroze Kabeer Khan. M

Thanks for pointing this out. There will be a re-edited version of this.

But since this is a binary file I think it's better to keep it in Program files folder.

Collapse
 
erebos-manannan profile image
Erebos Manannán

c:\Program files is where installers should put applications in. If there was a Flutter installer and it set up the thing, it would be appropriate for it to go under C:\Program files. You should definitely not check out Git repositories there randomly.

The common practice is to add the bin folder to your PATH when it's necessary. It's not all that much work.

One good option on Windows is to set up e.g. c:\tools and put your tools under that, downloading a release for that there would end up with e.g. C:\tools\flutter\bin to add to your path. Another option is to use %USERPROFILE% or %APPDATA%, so you end up with %USERPROFILE%\flutter\bin or %APPDATA%\flutter\bin in your path.

I've been working on the concept of a "standard development environment" incl. this kind of paths recently and should probably add something about this there 🤔

On Linux it's pretty common to use $HOME for all user owned things, if you want to make it globally available for the machine and owned by root, then e.g. /opt/flutter would be appropriate. I believe a lot of things like Android SDK get installed under /opt.

One of the important things to keep in mind with these paths is that it's actually important where your files go for the security model of the OS.

C:\Program files is supposed to not be editable with the user permissions, and require Administrator access instead just as /opt, /etc, etc. are supposed to require root access. You're not running everything as root in Linux, you shouldn't be running without UAC or everything as Administrator on Windows.

Collapse
 
borisimple profile image
Boris Krstić

Flutter is finally something that is very enjoyable for use. It's a bit different approach which works pretty well for most of the things. Team behind it seems dedicated and they are bringing solution to all kind of different screens and platforms. I could do my full time work in Flutter/Dart. Too bad there are almost no related jobs in my area. It is questionable if you should focus on it, at least at the moment, but for some reason I am pretty sure that it will have a lot of jobs in the future.

Collapse
 
droidmakk profile image
Afroze Kabeer Khan. M

That's because react-native is being adopted as people in web development can port to mobile development easily

Collapse
 
ben profile image
Ben Halpern

Flutter for desktop is definitely one of the most interesting cross platform ideas around.

Collapse
 
imhotep111 profile image
Dr Imhotep AlBasiel

This is a must-have for anybody who wants to do Android and iOS development without the hassle of learning both languages

Collapse
 
droidmakk profile image
Afroze Kabeer Khan. M • Edited

Yes, There has been a lot of space as in Cross-platform development. Flutter has been doing pretty well for a while.

Collapse
 
imhotep111 profile image
Dr Imhotep AlBasiel

Flutter is a must learn because it saves so much time you don't have to run out and learn Android or iOS just learn flutter just to get stuff done quick so it's a must I got a lot of Oxnard development and I'm planning that it's a good way for me to make money while I sleep cuz I said are hiring two extra guys I just learned flutter some of the process of packing to read right now thanks again let me know what else you're doing.