Original address: medium.com/flutter-com…

Author: medium.com/imaachman

Published: 19 September 2020-6 minutes to read

Flutter gives us the ability to develop and maintain cross-platform applications from a single code base. While it’s still a work in progress, platform support is improving rapidly. With the recent announcement of a collaboration between the Flutter and Canonical teams, it is easier than ever to develop and deploy Flutter applications on Linux.

I can’t wait to test it out, but I only have a Windows laptop. Sure, I have options like dual-boot and virtualization, but none of them provide a seamless development experience. Not to mention the hassle of setting it all up.

Last week, the latest release of Kali Linux introduced many features, including Kali-win-kex, which provides a seemingly native desktop experience on WSL 2. The next thing I thought was “let’s run a Flutter on this thing!” .

It really is

The Windows subsystem of Linux

WSL is a compatibility layer for Windows 10 that allows us to run Linux-based command-line tools. Microsoft went a step further and built WSL 2 on top of a true Linux kernel, which meant a significant increase in performance and functionality. WSL 2 provides enough speed and stability for a good development experience. So, let’s set it up.

Step 1: Install the WSL

Start Powershell as an administrator and run this.

Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux
Copy the code

Step 2: Reboot

Step 3: Enable the WSL and virtual machine platform.

Start Powershell as an administrator and run these two commands.

dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
Copy the code

Step 4, reboot!

Step 5: Install the Linux kernel

Download and install the WSL 2 Linux kernel here: aka.ms/wsl2kernel.

Step 6: Set the default version to WSL 2.

Get Powershell up and running as an administrator.

wsl --set-default-version 2
Copy the code

Now that WSL 2 is installed, we are ready to install Kali Linux Distro.

Kali Linux

Go to the Microsoft store and download a copy of Kali Linux.

Yes, it’s that simple;)

We can launch Kali as easily as any other application. The first time you start up, it takes some time to set up and requires you to create a username and password.

Win-Kex

Windows Kali Experience or Win-Kex provides a Kali graphical user interface with an XFCE desktop, connected to Windows via virtual Network Computing (VNC). Everything is local, so it starts immediately with negligible lag. Install Win-kex by executing this command.

$ sudo apt update && sudo apt upgrade && sudo apt install kali-win-kex
Copy the code

This command will install a number of components, including XFCE DE, TigerVNC server, and viewer. This will take some time, please be patient 🙂 after the installation is complete, we can start the GUI with this little command.

kex
Copy the code

This little command can start the VNC server on the Linux side, start the viewer on the Windows side, and then connect to both at once. That’s great!

That’s what it looks like

I have created a folder for the Flutter project;)

A couple of things

  • Make sure you’re turning it on$ kexCommand is not in the Windows directory.
  • Run after each session$ kex stop.

Keep these two things in mind to avoid unnecessary mistakes and keep things smooth.

Let us Flutter?

Canonical has made it super easy to install Flutter on Linux using SNAPd. However, SNAPD is not officially supported by WSL, and the workaround is not easy. Therefore, we will download the Flutter manually from here.

Once downloaded, just unzip it to the place you like 🙂

The UPDATE path is recommended in the Flutter documentation, using Flutter across terminal sessions. But there’s a small problem, we’re not just running on Linux. We ran it on Windows, and it had access to Windows file systems.

This means that if we have Flutter installed on Windows, every time we run the Flutter command, it will look at things on the Windows side and ignore Flutter installed on Linux, even if we update the path. I know, it’s weird and super annoying (having to learn 😢).

So here’s a workaround! We can run the Flutter Doctor through such access.

$ <DIRECTORY_WHERE_FLUTTER_IS_EXTRACTED>/flutter/bin/flutter doctor

# for me, it's ~/Documents
$ ~/Documents/flutter/bin/flutter doctor
Copy the code

It’s working fine! But it’s too long! It’s not supposed to be, is it?

To solve this problem, we’ll use Bash’s alias feature. Simply run this command to create the flutter alias.

$ alias flutter='<DIRECTORY_WHERE_FLUTTER_IS_EXTRACTED>/flutter/bin/flutter'
Copy the code

This will work perfectly in the current terminal session.

Now, in order for it to persist in the terminal session, we must edit the.bashrc file.

$ nano ~/.bashrc
Copy the code

In the file, add the following line in exactly the right place.

# enable color support ls and add handy aliases
if [ -x /usr/bin/dircolors ]; then
  test -r ~/.dircolors && eval "$(dircolors -b ~/.dircolors)" || eval "$(dircolors -b)"
  alias ls='ls --color=auto'
  alias flutter='~/Documents/flutter/bin/flutter'// add right here! .fi
Copy the code

Press CTRL + X to exit the editor and press Y and Enter to save the changes.

Now, just type this command to make the alias available in the current session.

$ source ~/.bashrc
Copy the code

Well, it’s a lot of steps, but we’re done! Now the flutter command works as expected 🙂

The development of Linux

We need to set something up to develop desktop applications on Linux.

Change the Flutter channel to develop.

$ flutter channel dev
Copy the code

Enable Linux desktop development.

$ flutter config --enable-linux-desktop
Copy the code

What we need now are some utilities for Linux development. You can run the Flutter Doctor to check everything you need. Everything can be installed in one command.

$ sudo apt-get install clang cmake ninja-build pkg-config libgtk-3-dev
Copy the code

Wait for installation, then run the Flutter Doctor again to check one last time.

Here we have it! Flutter, fully configured, can be developed for Linux applications on Windows 10.

Now we can write the Flutter application directly on the distribution. Alternatively, we can use the VS Code Remote WSL extension to write Code on Windows and run it on Linux. It’s a more fluid experience.

VS Code

Install the extension.

Go to the desired directory and enter.

$ cd ~/Desktop/Flutter ## go to desired directory
$ code . ## open VS Code
Copy the code

VS Code will now open in that directory on the Linux file system. Even integrated terminals default to Bash.

You will also need to install WSL’s Flutter and Dart extensions.

All right!

Everything will work the way you expect it to. Except that Flutter Run only builds applications when called from the Linux GUI(KEX). When called from the integration terminal, it will not locate the display and the application will not run.

So, let’s see what the development experience looks like!

www.loom.com/share/80b33…

Well, that’s all for now!

Hope you enjoyed this guide/hack that tries to simplify cross-platform development and increase developer productivity. Flutter aims to be a universal SDK, while Windows is actively trying to be the ultimate platform for developers. And judging by current progress, that doesn’t seem far off.

Look at my previous work!

Flutter GetX Ecosystem ~ State management.

A Flutter calendar using BLoC architecture

Any questions or suggestions? Put them all in the comments section 😀

Did you like this article? Press the 👏 button! This will inspire me to write more and more articles! You can find me on LinkedIn, follow me on GitHub, follow me on Twitter or email.

You can find me on LinkedIn, follow me on GitHub, follow me on Twitter, or email me at [email protected] for any kind of technical discussion.