阅读 1736
【flutter】在Win11中开发Linux桌面应用

【flutter】在Win11中开发Linux桌面应用

小知识,大挑战!本文正在参与「程序员必备小知识」创作活动

本文已参与「掘力星计划」,赢取创作大礼包,挑战创作激励金。

封面图片来自 Manjaro-chan
Disclaimer: 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.

  恰逢今天重装电脑,给电脑整上了Win11,先前所有的配置都没了,正好来整个 在Win11中开发Linux桌面应用

  WSL 是什么,这里我不再做更多的介绍,还没有了解的小伙伴,可以点击段首的链接进行了解。今天我们的主要目的是让我们的 Flutter应用Win11 WSL 中跑起来。

在Win11中启用WSL2

首先,我们需要在 Win11 中启用 wsl ,具体的启用方式,我们可以在微软 官方文档 中获取到详细的信息

  • 在Win11的搜索里面,输入terminal,选择 Windows Terminal 应用(Windows Terminal 现在已经内置在系统中,但是并不是最新版本,建议打开 Microsoft Store 把所有应用更新一遍,很多新的应用哦),选择 以管理员身份运行,打开终端

image.png

  • 我们在命令行中输入 wsl --install 回车,该命令将默认启用 WSL2 ,不带参数将默认安装 Ubuntu ,等待安装完成,安装结束后,执行 wsl --updateWSL 更新到最新的版本,重启电脑使当前操作生效
wsl --install
复制代码

image.png

wsl --update
复制代码

image.png

重启完成之后,会弹出 wsl 的安装框,会进行自动安装 Ubuntu ,安装完成之后,输入你的账号名称和密码,保管好账号和密码,后面root操作会用上。现在我们可以输入 wsl --list --verbose 查看安装运行情况,更多的命令请查看 WSL的基本命令。如果提示安装失败,请检查 BIOS 是否开启虚拟化。

image.png

  • 如果想要安装其他发行版的Linux系统,可以查看 官方文档 使用命令行安装。我们也可以在 Microsoft Store 中搜索 wsl ,查看支持的linux发行版,直接点击 获取 按钮安装。(PS:在 Microsoft Store 中直接安装linux,并不会直接启用 wsl 的哦)

image.png

  • 安装完毕之后,打开 Windows Terminal ,点击 下拉按钮,能够看到 Ubuntu 或者其他发行版选项说明安装成功了。

image.png

image.png

安装SDK以及配置环境

根据 官方Linux安装文档 ,我们保险起见,先装一下基础的工具

sudo apt-get install bash curl file unzip xz-utils zip -y
复制代码

下面来安装 flutter 相关 sdk ,我们这儿图方便直接执行 sudo snap install flutter --classic 将自动完成 flutter sdk 的安装并且配置好相关环境,Ubuntu 已经内置了 snap

sudo snap install flutter --classic
复制代码

等待安装完成即可

image.png

我们根据官网提示,执行 flutter sdk-path ,查看一下情况

image.png

image.png

哦豁,2.2.1。。。强迫症的我,必须得再来一下 flutter upgrade,然后重启 wsl 之后再执行 flutter 相关命令,直接 snap 提示 broken 了,这个情况就比较尴尬了,命令和sdk直接不好使了。这里只有等官方向 snap store 推送最新的 Flutter stable 版本了,如果不追求最新版本,上述的操作是最简单的,直接一个命令环境sdk全部解决。

下面我们还是使用手动的方式安装一下 flutter sdk 吧,偷懒是不可取的,哭泣。

5c7ece89285d6b39.jfif

我们先创建一下将要安装目录,下载

image.png

wget https://storage.flutter-io.cn/flutter_infra_release/releases/stable/linux/flutter_linux_2.5.2-stable.tar.xz
复制代码

将下载的文件解压出来

image.png

flutter 目录重命名为 sdk,这里的目录规划看个人喜好,没有特殊的要求

image.png

flutterdart 配置到环境变量中,我们直接执行 cd 进入 home 目录,执行 vim .bashrc ,在文件最后一行添加下面脚本,保存退出

image.png

export PATH="$PATH:/home/iota9star/sdks/flutter/sdk/bin"
export PATH="$PATH:/home/iota9star/sdks/flutter/sdk/bin/cache/dart-sdk/bin"
复制代码

执行 source .bashrc 使其生效,我们来执行一下 dart --versionflutter doctor,看看有没有生效。

image.png

很完美,因为我们这儿只是开发桌面应用,就不添加android相关sdk和开发工具链了,接着,我们来安装 flutter 开发过程中需要的三方工具

sudo apt-get install clang cmake ninja-build pkg-config libgtk-3-dev -y
复制代码

等待安装完毕

安装过程可能会遇到以下的问题

  • 无法下载或者下载很慢,解决方案,为 wsl2 启用代理,这里我们按照这儿的教程,将代理设置允许局域网连接,然后在 Ubuntu 命令行创建一个 .proxyrc 文件,添加以下内容,执行 source .proxyrc 生效
#!/bin/bash

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

export ALL_PROXY="http://$host_ip:你的代理的端口号"
复制代码
  • 执行 sudo snap install flutter --classic 可能会遇到

error: cannot communicate with server: Post http://localhost/v2/snaps/flutter: dial unix /run/snapd.socket: connect: no such file or directory 这个错误,通过查找 WSL/issues/2374,我们可以在 Ubuntu 中执行以下命令

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

cd ubuntu-wsl2-systemd-script/

bash ubuntu-wsl2-systemd-script.sh
复制代码

等待命令执行完毕,然后关闭当前窗口,我们打开新的 PowerShell 或者 CMD 并执行 wsl --shutdown 关闭 wsl ,关闭结束之后,再次打开 Ubuntu 窗口,再次执行 sudo snap install flutter --classic 就可以开始安装

wsl --shutdown
复制代码

尝试运行

首先我们先准备一个支持 flutter linux desktop 的应用,我这里使用的是我一直在维护的项目 蜜柑计划 。如果没有这样一个项目,你可以直接使用 Android Studio 新建一个项目,在新建时启用 linux 支持即可,如果已有一个 纯flutter项目,那么你可以直接使用 flutter config --enable-linux-desktop 启用 linux支持。现在我们进入 蜜柑计划 工程目录。我们先执行一下 flutter devices 查看一下,是否正确的识别 Ubuntu

image.png

很不错,可以识别到设备。接着我们执行 flutter run -d linux 来运行一下

image.png

3e4856fd57119b5b.jfif

好吧,我摊牌了,这个问题搞了我一天的时间,查看了各种 issue,谷歌了各种关键字,各种尝试,都没有启动起来,然后隔几个小时重新搜索打开看一遍,最后在最开始搜索的 issue 里面找到了解决方案。。。

56604148d39ad63d.jfif

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.
复制代码

废话不多说,如果遇到上面的问题,我们先检查一下,执行 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
复制代码

我们进行手动创建

sudo rm -r /tmp/.X11-unix
复制代码
ln -s /mnt/wslg/.X11-unix /tmp/.X11-unix
复制代码

再次执行 ls -la /tmp/.X11-unix ,这次我们应该和上面有相似的输出。

如果还是不行,我们执行 ls /tmp/.X11-unix ,应该得到一个 X0 的输出,如果没有,关闭当前终端,在 PowerShell 或者 CMD 执行 wsl --shutdown ,关闭之后,重新打开 Ubuntu 再次执行上述命令,如果再不行,那就只能提 issue 了,哈哈哈。。。

iota9star@nichijou:/mnt/d/work/space/app/mikan_flutter$ ls /tmp/.X11-unix
X0
复制代码

现在我们来看一下执行效果吧,看起来是不是很棒?

image.png

但是事实并不是这样,默认显示的会出现中文乱码的问题,这里正确显示中文,是因为 蜜柑计划 支持字体切换,这里我将字体切换成其他字体(这里是选中了鸿蒙字体)才显示正常

当我们还原到默认字体,中文全是圈圈

image.png

我们还需要给 WSL 启用中文才行,首先,我们先执行

sudo apt install language-pack-zh-hans*
复制代码

安装中文字体包,然后我们编辑 /etc/locale.gen

sudo vim /etc/locale.gen
复制代码

找到 # zh_CN.UTF-8 UTF-8 删除前面的 # 保存并退出。再编辑 /etc/default/locale

sudo vim /etc/default/locale
复制代码

LANG=C.UTF-8 修改为

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"
复制代码

保存并退出,操作完毕后,编辑 /etc/environment

sudo vim /etc/environment
复制代码

在内容最后换行,添加

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"
复制代码

保存并退出,操作完毕后,编辑 /etc/profile

sudo vim /etc/profile
复制代码

在内容最后换行,添加

LANG="zh_CN.UTF-8"
复制代码

保存并退出,操作完毕后关闭当前 Ubuntu 标签页,重新打开,我们可以发现,界面已经切换成中文了

image.png

我们再来运行一下程序

image.png

3e4856fd57119b5b.jfif

还是显示中文乱码,我们找找 issue flutter/flutter/issues/62777 go-flutter-desktop/go-flutter/issues/223 ,看到这两个其实我已经明白,这个中文乱码问题基本没啥救了,因为别人的linux可能就没有配置中文,没有中文字体,就算配置了也不知道别人配置的字体名称,也就没法处理了。最好的方式是自己内置一个字体,但是这样成本又太高了,轻轻松松就会增加几十兆的体积,这样做并不可取,还是需要官方对linux中文的支持。对于 蜜柑计划 来说,简单判断一下 linux 平台,给添加上一个默认选中的字体即可

// 如果是 linux 系统,默认使用鸿蒙字体
String? get defaultFontFamilyName => Platform.isLinux ? "hmsans" : null;
复制代码

修改完成,第一次启动大概会有一两秒中的乱码,之后显示正常,下次打开,直接正常显示

总结一下

  • 因为时间问题,文章到这儿基本就告一段落了,如果使用 Android Studio 的话,现在 wsl 支持还不是很完善,我们可以在终端之中输入 wsl 回车来切换成 Ubuntu 的bash。调试编译这些还是比较麻烦的。如果使用 vsc 的话,可以安装 Remote WSL 这个插件来进行辅助开发,体验上就比 Android Studio 要好上许多,像我这样支持多端的,一般只需要在其他端测试好,再到linux跑上一遍即可,不需要考虑太多,后续可能会加上一些骚操作。

  • Flutter现在在 WindowsMacOSLinux 等原来的系统上开发体验都还不错,但我们使用的是 WSL 上跑的 linux ,我们也不必抱有太高的期待,能跑就行。如果要很完美的体验,还是得到对应平台开发。桌面应用相对于 androidios来说,编译启动速度都会快上不少,我现在开发新的功能一般都直接使用 Windows ,开发完以后再到其他平台验证,速度直接上了一个台阶。

  • 通过我跑的这几次,我发现使用三方截图工具有一定几率会直接造成应用闪退,使用系统自带截图 Win + Shift + s 却不会造成这个问题。更多的问题需要更多的验证,文章到此就结束了

如果文章对您有帮助的话,欢迎 点赞评论关注收藏分享 ,您的支持是我码字的动力,万分感谢!!!🌈

最后,大家可以 点击这儿 加入QQ群 FlutterCandies🍭 和各路大佬们进行交流哦,这里大家说话都超好听的

参考地址

https://www.pixiv.net/artworks/91376951

文章分类
前端
文章标签