Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Cover image from Manjaro-Chan Manjaro® name and LOGO are registered trademarks of Manjaro GmbH & Co. KG. Some rights reserved. This work is licensed Under a Creative Commons Attribution-NonCommercial 4.0 International License.

Coincides with today to reinstall the computer, to the computer whole Win11, all the previous configuration is gone, just to the entire development of Linux desktop applications in Win11.

What WSL is, I will not make more introductions here. If you do not know more about WSL, you can click the link at the top of the paragraph to learn more. Our main purpose today is to get our Flutter application running in Win11 WSL.

Enable WSL2 in Windows 11

First of all, we need to enable WSL in Windows 11. We can obtain detailed information about how to enable WSL in Microsoft official documentation

  • In Win11 search, enterterminal, the choice ofWindows TerminalApplications (Windows TerminalIt has been built into the system, but it is not the latest version. You are advised to open itMicrosoft StoreUpdate all the apps, lots of new apps), selectRun as an administrator, open the terminal

  • We type on the command linewsl --installPress Enter. The command is enabled by defaultWSL2, will be installed by default without parametersUbuntuAfter the installation is complete, run the commandwsl --update 将 WSLTo update to the latest version, restart the computer for the current action to take effect
wsl --install
Copy the code

wsl --update
Copy the code

After the restart, the WSL installation box will pop up, and Ubuntu will be automatically installed. After the installation is complete, enter your account name and password, and keep the account and password, which will be used for root operation later. Now you can type WSL –list –verbose to see how the installation is running. For more information, see WSL basic commands. If an installation failure message is displayed, check whether virtualization is enabled in the BIOS.

  • If you want to install Linux from another distribution, check it outThe official documentationInstall using the command line. We can also be atMicrosoft StoreIn the searchwslTo view supported Linux distributions, clickTo obtainButton mount. (PS: inMicrosoft StoreLinux is installed directly in, not enabled directlywslOh)

  • Once installed, open itWindows Terminal, click on theThe drop-down buttonBe able to seeUbuntuOr other distribution options indicate that the installation was successful.

Install the SDK and configure the environment

According to the official Linux installation documentation, let’s play it safe by installing the basic tools first

sudo apt-get install bash curl file unzip xz-utils zip -y
Copy the code

Sudo Snap install flutter — Classic will automatically install the FLUTTER SDK and configure the environment. Ubuntu already has Snap built into the flutter

sudo snap install flutter --classic
Copy the code

Wait until the installation is complete

We execute flutter SDK-path as prompted on the website to check the situation

Oh dear, 2.2.1… Because of my obsessive-compulsive disorder, I have to upgrade the flutter again, restart the WSL, and then execute the related flutter commands. The snap message “broken” is displayed directly. This situation is quite embarrassing, and the command and SDK are not working properly. The only way to push the latest version of Flutter stable to snap Store is to wait for the official to push the latest version of Flutter stable to Snap Store. If you do not pursue the latest version, the operation of the appeal is the easiest, which can be solved by the SDK with a direct command.

Now let’s install the Flutter SDK manually. Lazy is not recommended. Cry.

Let’s create the directory we’re going to install, download

Wget HTTP: / / https://storage.flutter-io.cn/flutter_infra_release/releases/stable/linux/flutter_linux_2.5.2-stable.tar.xzCopy the code

Unzip the downloaded files

Rename the flutter directory to SDK. The directory planning here is a matter of personal preference, no special requirements

To configure flutter and dart into the environment variables, we directly run CD to the home directory, execute vim. bashrc, add the following script to the last line of the file, save and exit

export PATH="$PATH:/home/iota9star/sdks/flutter/sdk/bin"
export PATH="$PATH:/home/iota9star/sdks/flutter/sdk/bin/cache/dart-sdk/bin"
Copy the code

Execute source. bashrc to make it work. Let’s execute dart –version and flutter doctor to see if this works.

This is perfect because we are only developing the desktop application here. We don’t need to add the Android SDK and development tool chain. Then, we will install the third party tools needed for flutter development

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

Waiting for installation

The following problems may occur during installation

  • Unable to download or download slowly, the solution, forwsl2Enable the agent, here we followThe tutorial here, set the proxy to allow LAN connection and then inUbuntuCommand line to create one.proxyrcFile, add the following content, and executesource .proxyrcTo take effect
#! /bin/bash

host_ip=$(cat /etc/resolv.conf |grep "nameserver" |cut -f 2 -d "")

export ALL_PROXY="http://$host_ip: port number of your agent"
Copy the code
  • performsudo snap install flutter --classicMay come across

error: cannot communicate with server: Post http://localhost/v2/snaps/flutter: dial unix /run/snapd.socket: connect: Error no such file or directory by looking for WSL/issues/2374 we can run the following command in Ubuntu

git clone https://github.com/DamionGans/ubuntu-wsl2-systemd-script.git

cd ubuntu-wsl2-systemd-script/

bash ubuntu-wsl2-systemd-script.sh
Copy the code

Wait for the command to complete, then close the current window, we open a new PowerShell or CMD and run WSL –shutdown to close the WSL, after closing, open the Ubuntu window again, Sudo Snap install Flutter –classic is executed again to start the installation

wsl --shutdown
Copy the code

Try to run

First of all, we will prepare an application to support Flutter Linux Desktop. Here I am using the caper project I have been maintaining. If there is no such project, you can create a new project using Android Studio and enable Linux support while creating the project. If there is already a pure Flutter project, You can enable Linux support directly with flutter config –enable-linux-desktop. Now let’s go to project Mandarin. Let’s first execute flutter Devices to see if Ubuntu is correctly identified

That’s good. You can I.D. the device. Then we execute flutter run -d Linux to run it

Ok, I have laid my cards on the table. I spent a whole day checking various issues, Googling various keywords and trying all kinds of things, but none of them started. Then I searched and opened it again every few hours, and finally found a solution in the issue I searched at the beginning…

Launching lib/main.dart on Linux in debug mode...
Building Linux application...
Unable to init server: Could not connect: Connection refused

(five_starred_red_flag:5035): Gtk-WARNING **: 20:49:23.793: cannot open display: :0
Error waiting for a debug connection: The log reader stopped unexpectedly.
Error launching application on Linux.
Copy the code

/ TMP /.x11 -unix/ls -la/TMP /.x11 -unix/ls -la/TMP /.x11 -unix

iota9star@nichijou:/mnt/d/work/space/app/mikan_flutter$ ls -la /tmp/.X11-unix
lrwxrwxrwx 1 iota9star iota9star 19 Oct  7 21:54 /tmp/.X11-unix -> /mnt/wslg/.X11-unix
Copy the code

Let’s create it manually

sudo rm -r /tmp/.X11-unix
Copy the code
ln -s /mnt/wslg/.X11-unix /tmp/.X11-unix
Copy the code

Run ls -la/TMP /.x11-UNIX again, this time we should have similar output as above.

X11-unix, should get an X0 output. If not, close the current terminal and run WSL –shutdown in PowerShell or CMD. Re-open Ubuntu and execute the appeal command again, if not, then can only issue, hahaha…

iota9star@nichijou:/mnt/d/work/space/app/mikan_flutter$ ls /tmp/.X11-unix
X0
Copy the code

Now let’s take a look at the implementation, doesn’t it look great?

But the fact is not so, the default display will appear the problem of Chinese garbled, here the correct display of Chinese, because the Mandarin project supports font switching, here I switch the font to another font to display normal

When we revert to the default font, Chinese is full of circles

We also need to enable Chinese for WSL. First, let’s execute

sudo apt install language-pack-zh-hans*
Copy the code

Install the Chinese font package, and then edit /etc/locale.gen

sudo vim /etc/locale.gen
Copy the code

Find # zh_cn.utF-8 utF-8 delete the preceding # save and exit. Then edit/etc/default/locale

sudo vim /etc/default/locale
Copy the code

Change LANG= c.utF-8 to

LANG="zh_CN.UTF-8"
LANGUAGE="zh_CN:zh"
LC_NUMERIC="zh_CN"
LC_TIME="zh_CN"
LC_MONETARY="zh_CN"
LC_PAPER="zh_CN"
LC_NAME="zh_CN"
LC_ADDRESS="zh_CN"
LC_TELEPHONE="zh_CN"
LC_MEASUREMENT="zh_CN"
LC_IDENTIFICATION="zh_CN"
LC_ALL="zh_CN.UTF-8"
Copy the code

Save the configuration and exit. After the operation is complete, edit /etc/environment

sudo vim /etc/environment
Copy the code

Wrap at the end of the content, add

LANG="zh_CN.UTF-8"
LANGUAGE="zh_CN:zh"
LC_NUMERIC="zh_CN"
LC_TIME="zh_CN"
LC_MONETARY="zh_CN"
LC_PAPER="zh_CN"
LC_NAME="zh_CN"
LC_ADDRESS="zh_CN"
LC_TELEPHONE="zh_CN"
LC_MEASUREMENT="zh_CN"
LC_IDENTIFICATION="zh_CN"
LC_ALL="zh_CN.UTF-8"
Copy the code

Save the configuration and exit. After the operation is complete, edit /etc/profile

sudo vim /etc/profile
Copy the code

Wrap at the end of the content, add

LANG="zh_CN.UTF-8"
Copy the code

Save and exit, close the current Ubuntu TAB, open it again, and you can see that the screen has been switched to Chinese

So let’s run the program again

Or show Chinese garbled, we find issue flutter/flutter/issues / 62777 go – flutter – desktop/go – flutter/issues / 223, saw the two in fact, I have understood, the basic nothing saved Chinese garbled question, Because other people’s Linux may not be configured with Chinese, there is no Chinese font, and even if configured, they do not know the font name configured by others, so they cannot process it. The best way is to build your own font, but this is too expensive, easily add tens of megabytes of volume, this is not desirable, still need official Linux Chinese support. For the Mandarin project, simply judge the Linux platform and add a font that is selected by default

// On Linux, the default font is hongfu
String? get defaultFontFamilyName => Platform.isLinux ? "hmsans" : null;
Copy the code

After the modification is complete, there will be garbled code for one or two seconds in the first startup. After that, the display will be normal. Next time, the display will be normal

To summarize

  • For the time being, this article will probably end here. WSL support is not quite there yet if you use Android Studio, so you can switch to Ubuntu bash by typing WSL Enter in the terminal. Debugging and compiling these is a bit of a hassle. If you use VSC, you can install the plug-in Remote WSL to assist in development, and the experience is much better than Android Studio. For people like me who support multiple terminals, they usually just need to test on other terminals, and then run on Linux without too much consideration. Some manipulation may be added later.

  • Flutter currently works well on older systems like Windows, MacOS, Linux, etc. But we use Linux running on WSL. We don’t have to hold our breath. If you want a perfect experience, you still have to develop on the corresponding platform. Compared with Android and ios, desktop applications can be compiled and started much faster. Now I usually use Windows directly to develop new functions, and then go to other platforms for verification after development, so the speed is directly increased to a higher level.

  • Through my running several times, I found that using the three-party screenshot tool may directly cause the application to flash back to a certain extent, but using the system’s own screenshot Win + Shift + S will not cause this problem. More questions require more verification, and that’s the end of the article

If the article is helpful to you, welcome to like, comment, favorites, share, your support is my code word power, thank you!! 🌈

Finally, you can click here to join the QQ group FlutterCandies🍭 and communicate with various gurus

Refer to the address

  • Windows subsystem documentation for Linux
  • Install and configure the Flutter development environment on the Linux operating system
  • Displays the solution to the cannot-open-display
  • Mandarin program