Developing Flutter with VSCode and WSL2

Question

Since I mostly develop Web, using nginx, PHP and MySQL, I have ported my WebDev-environment entirely to WSL2. Since performance is very important, all my web-related projects reside on the WSL2-vhdx file /home/user/Projects/Web. In WSL2 I've installed all my necessary tools for a nice and neat Linux-like experience, Docker, GIT, etc.. This combined with VSCode remote integration works very well.

Now, I'm digging into building Flutter-Apps, and my Flutter-environment is installed on the Windows side. My Flutter-related projects reside on D:\Projects\Flutter which is a partition, and NOT USED in WSL2 in any way. Building Flutter-apps with flutter-windows-sdk and VSCode works neatly.

But, the problem is: Now I've my project files scattered all across my computer. Web-stuff in a WSL2-vhdx-file and Flutter-stuff on the D-partition.

Is there a way to build flutter-apps with Flutter, while having the project-files stored on a WSL2-vhdx-file, in combination with VSCode-remote and an Android-emulator?

I tried creating a test Flutter-project on the \\wsl$ network mount, which didn't work.

Moving my web-related project files to the D:\ partition of Windows is no option, since the I/O mounts in WSL2 are extremely slow.

Solution 1

I got it working, reliably with adb connect 192.168.xxx For anyone interested, see my full blog post here: https://dnmc.in/2021/01/25/setting-up-flutter-natively-with-wsl2-vs-code-hot-reload/

Solution 2

Is there a way to build flutter-apps with Flutter, while having the project-files stored on a WSL2-vhdx-file, in combination with VSCode-remote and an Android-emulator?

I'm assuming (based on the mention of VS Code Remoting) that you want to run the extension in WSL. I haven't tried that specifically, but I have run Flutter inside WSL and also connected a VS Code Remoting session to an Android emulator in the cloud, so I would expect this to work.

You'll need to make sure you set up the Flutter SDK inside WSL (so you can run flutter commands inside WSL - it should be the Linux version of the Flutter SDK and not the Windows one if you're using the zip).

To have your emulator show up in flutter devices from inside WSL, you will likely need to run adb tcpip 5555 from the Windows side (this means you need an Android SDK in Windows) - this will tell your phone to listen on TCP port 5555. Then you'll need to run adb connect [phone ip]:5555 from inside WSL (this means you'll need an Android SDK in Linux). If all goes well, the phone should then show up in adb devices and also be picked up by the device selector in VS Code.

I tried creating a test Flutter-project on the \wsl$ network mount, which didn't work.

It's not clear what went wrong here, though my first guess would be that maybe the UNC path isn't supported - if you map a drive letter to it does it make a difference?

While this isn't an officially supported setup, feel free to raise issues in the Dart-Code repository on GitHub with any issues you have. It's not a priority, but I would like for VS Code Remoting (including WSL and Docker) to generally work for Dart and Flutter dev.