likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 40

封面图片来自 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 把所有应用更新一遍，很多新的应用哦），选择 以管理员身份运行，打开终端

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

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

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

wsl --update

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

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

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

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

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

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

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

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

安装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

等待安装完成即可

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

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

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

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

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

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

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

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

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

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

将下载的文件解压出来

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

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

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

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

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

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 --version 和 flutter doctor，看看有没有生效。

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

很完美，因为我们这儿只是开发桌面应用，就不添加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

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

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

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

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

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

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

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

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

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

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

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

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

我们还需要给 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 标签页，重新打开，我们可以发现，界面已经切换成中文了

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

我们再来运行一下程序

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

还是显示中文乱码，我们找找 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现在在 Windows 、 MacOS 、Linux 等原来的系统上开发体验都还不错，但我们使用的是 WSL 上跑的 linux ，我们也不必抱有太高的期待，能跑就行。如果要很完美的体验，还是得到对应平台开发。桌面应用相对于 android 、 ios来说，编译启动速度都会快上不少，我现在开发新的功能一般都直接使用 Windows ，开发完以后再到其他平台验证，速度直接上了一个台阶。

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

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

参考地址

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

转载自:https://juejin.cn/post/7016368272605970469
评论
请登录