How to setup Flutter development environment for Android on Linux… I mean Windows

Photo by Fahim Muntashir on Unsplash

Well, you guessed it. I’m talking about WSL. (Why Windows at all? For me, gaming)

Stack used in this post: Windows, WSL, Ubuntu, Flutter Version Manager, VcXsrv, Android SDK tools, Android device

I won’t get much into Windows + WSL + Ubuntu setup. You probably already have it. But if you don’t, not to worry. It’s pretty easy. Here’s the official documentation.

After it’s done let’s start with Flutter Version Manager (fvm).

Side note: It’s also okay to install Flutter without fvm but I prefer to install my software with version managers because I know “stuff” happens in the future and version managers help a lot.

Here’s the fvm documentation in case this post gets outdated.

We want to install fvm to Linux, not the Windows. Currently, recommended way is installing it with homebrew.

brew tap leoafarias/fvm
brew install fvm
# You should now have fvm command
# If your CLI can't find fvm command add this to your .bashrc file
export PATH="/home/linuxbrew/.linuxbrew/bin:$PATH"
fvm install stable
fvm global stable
# Add this line to your .bashrc file
export PATH=$PATH:$HOME/fvm/default/bin
Output of properly working `flutter --version` command
`flutter — version` command should now work

Run flutter doctor to see issues with your flutter setup. It will show Android related issues. We’ll fix them later.

Next tool: VcXsrv

Why VcXsrv? Actually, what is even VcXsrv? In short, it’s a way for WSL2 to run apps with GUI.

Side note: There is an official alternative but until it is more available for common use I intend to stick with VcXsrv. By the time you read this post, if wslg is available for your setup, you may want to skip installing VcXsrv, otherwise let’s continue.

Okay, now why: Because I don’t want to bother with keeping Android related software (SDK platforms, build tools, cli tools, platform tools etc.) up to date with just command line. So we will install Android Studio to do it for us. You don’t have to use it for coding though, you can still use your favorite text editor. This might take longer to setup (in terms of waiting) but is easier to use.

Android Studio SDK Manager has pretty easy to use UI

At the time of writing VcXsrv is available on SourceForge. Install it.

Run XLaunch.

VcXsrv display settings
Select Multiple windows
VcXsrv client startup
Select “Start no client” option
VcXsrv extra settings
Make sure “Disable access control” is checked

Now you can see VcXsrv icon in system tray. Hover over it. You should see something like YOUR-COMPUTER_NAME:0.0 - 0 Clients. We will use this in a moment.

If you want to test what VcXsrv does, right click icon > Applications > xcalc

A calculator GUI
Some calculator with old looking UI

What’s the big deal? Well, xcalc is a Linux app!

Now for WSL to be able to access this we need to define an environment variable in our .bashrc file:

export WSL_HOST_IP=`grep nameserver /etc/resolv.conf | sed 's/nameserver //'`
export VC_XSRV_DISPLAY="0.0" # This value is from the tray icon
export DISPLAY="$WSL_HOST_IP:$VC_XSRV_DISPLAY" # Only DISPLAY is important, other variables are for clarity

You can install xcalc to WSL and test it if you want. Not required though.

Now our GUI environment is ready, let’s install Android Studio to WSL.

So download Android Studio for Linux and extract it (tar -zxvf filename.tar.gz) to wherever you like. I use this path: /usr/local/android-studio

Create some alias if you prefer.

alias studio=/usr/local/android-studio/bin/studio.sh

Run studio and you should see it running through VcXsrv. Let it do its thing (download SDK, platform tools, cli tools etc.)

Set environment variables in your .bashrc

export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

Your .bashrc should look like this if you’ve followed all steps in this guide:

# Homebrew
export PATH="/home/linuxbrew/.linuxbrew/bin:$PATH"
# Flutter Version Manager
export PATH=$PATH:$HOME/fvm/default/bin
# Android paths
export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
# VcXsrv on WSL Host
export WSL_HOST_IP=`grep nameserver /etc/resolv.conf | sed 's/nameserver //'`
export VC_XSRV_DISPLAY="0.0" # This value is from the tray icon
export DISPLAY="$WSL_HOST_IP:$VC_XSRV_DISPLAY" # Only DISPLAY is important, other variables are for clarity

And your flutter doctor -v output related to Android should be mostly green. You may just need to run flutter doctor --android-licenses.

We’re almost there.

  1. Create a sample app: flutter create flutter_application_1
  2. Enable developer mode on your Android device.
  3. In the developer settings enable USB debugging & wireless debugging.
  4. Connect your device to your PC with the cable.
  5. Run adb devices and you probably won’t see your device listed even though it is connected.
  6. If adb devices returns empty list download platform tools for Windows: https://dl.google.com/android/repository/platform-tools-latest-windows.zip and run adb.exe tcpip 5555 (note that adb.exe --version output may need to be the exactly same with the one inside of WSL)
  7. Unplug the cable.
  8. Get your device’s IP address from Settings > About > Status (varies from device to device). You should see something like 192.168.1.5
  9. Run adb connect 192.168.1.5 (WSL). If this step gives you an error message try disabling and enabling Wi-Fi on the phone.
  10. Run adb devices and you should see it in the list.
  11. Now you can run flutter run in your project and should see it appear on your device.

When I first tried I got an SDK version related error. If you also get same error here’s the diff for fix:

Update compileSdkVersion & targetSdkVersion in android/app/build.gradle & ext.kotlin_version in android/build.gradle

Of course this is to just see the app on your device. Don’t forget to check which versions you should support depending on your requirements and update these accordingly.

By the way, this was my first blog post. I hope it was helpful.

Cya

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store