How to develop Flutter web app on Windows Subsystems for Linux (Debian 10)

user_7397906 0
Viewed 3010

I would like to develop Flutter web app on Windows Subsystems for Linux (Debian 10). I followed this instruction. https://flutter.dev/docs/get-started/codelab-web

flutter channel beta
flutter upgrade
flutter config --enable-web

First, I input these commands in my terminal and all of them worked fine.

Second, I tried flutter doctor command and this is the result.

Downloading android-arm-release/linux-x64 tools...                  2.1s
Downloading android-arm64-profile/linux-x64 tools...                1.8s
Downloading android-arm64-release/linux-x64 tools...                1.6s
Downloading android-x64-profile/linux-x64 tools...                  1.6s
Downloading android-x64-release/linux-x64 tools...                  1.5s
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, 1.18.0-11.1.pre, on Linux, locale en_US.UTF-8)
[✗] 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, set ANDROID_SDK_ROOT to that location.
      You may also want to add it to your PATH environment variable.

[✗] Chrome - develop for the web (Cannot find Chrome executable at google-chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[!] Android Studio (not installed)
[✓] Connected device (1 available)

! Doctor found issues in 3 categories.

I develop web app, so I don't need Android toolchain and Android Studio, but I need Chrome.

I think there are two ways.

  1. install Chrome on WSL => I searched the Internet, but I couldn't find the way to do so.

  2. user Chrome on Windows 10(not WSL) => I searched the Internet (for example:flutter chrome "windows subsystems for linux"), but I couldn't find the way to do so.

Could you give me any advice?

flutter windows-subsystem-for-linux google-chrome
4 Answers

Try setting the environment variable CHROME_EXECUTABLE to the path of the Chrome executable installed on Windows, so Flutter can locate it.

user_12271660

Set the chrome executable path on Windows host as shown in the figure

Turns out, you just need to tell flutter where chrome.exe is located on your host windows machine!

user_52326390

One way to do this is to use GUI Apps, which unfortunately requires WSL version 2 and Windows 11. Read More

Making WSL and GUI Apps ready

If you don't already have wsl, run Powershell in Admin mode and run

wsl --install -d Ubuntu
sudo apt update

change the distro as you like

If you have, run these to make sure it's ready

wsl --set-default-version 2
wsl --update
wsl --shutdown
sudo apt update

Installing Google Chrome on WSL

  1. Change directories into the temp folder: cd /tmp
  2. Use wget to download it: sudo wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
  3. Get the current stable version: sudo dpkg -i google-chrome-stable_current_amd64.deb
  4. Fix the package: sudo apt install --fix-broken -y
  5. Configure the package: sudo dpkg -i google-chrome-stable_current_amd64.deb

To launch, enter: google-chrome

You should be good to go

Running flutter doctor should mark web development as ready, and projects should run with this command:

flutter run -d chrome --web-renderer canvaskit
user_44573150
user_31675700
Related