Flutter Linux Desktop 开发环境搭建，Windows11 WSL2 安装 Ubuntu

发表于 更新于 分类于 阅读次数： Valine：

Windows启用WSL2安装Ubuntu

Windows设置里开启虚拟化

开启开发者模式

  • 设置里，搜索开发者选项，打开即可

开启虚拟化

  • 按下 Win + R，调出命令输入窗口。输入指令 appwiz.cpl
  • 点击左侧的 【启动或关闭 Windows 功能】
  • 勾选【适用于 Linux 的 Windows 子系统】和【虚拟机平台】和【Hyper-V】

执行更新wsl命令已确认wsl为最新版

wsl --set-default-version 2
wsl --update
wsl --install // 安装wslg

应用商店安装Ubuntu

  • 启动 【Windows Store】并搜索 Ubuntu，然后选择要安装的系统；
  • 注意，需要先执行上面的 install 命令，要不然应用商店安装的Ubuntu都打不开；

启动Ubuntu

  1. 开始菜单找到Ubuntu程序点击打开（推荐）
  2. 在命令提示符中输入 wsl（看到的linux目录比较奇怪）

参考

  • 如何在windows 11中安装WSLG(WSL2)
  • Windows11上WSL2子系统Ubuntu安装Gnome桌面

配置 WSL2 图形界面

安装 GUI 组件

sudo apt install -y tasksel
sudo tasksel install xubuntu-desktop
sudo apt install gtk2-engines

配置显示器信息

接下来要配置显示器信息，方便 Linux 使用：

export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2; exit;}'):0.0
export LIBGL_ALWAYS_INDIRECT=1
sudo /etc/init.d/dbus start &> /dev/null

把上面这段配置加入 ~/.bashrc，当我们登入 WSL 时，就会自动完成配置。不过这样一来，每次登入都要敲密码，也有点麻烦，所以可以自己取舍一下。或者把上面的配置单独存放一个脚本文件，需要使用 GUI 的时候再运行启动。

安装 X-server

下载，安装，启动 VcXsrv。接下来 VcXsrv 会要求我们配置使用方式，依次选择“Multiple Windows”、“Start no client”，并且勾选“Disable access control”，然后保存配置文件到本地，完成启动。以后可以通过双击配置文件启动 VcXsrv。
此时，在系统托盘里可以看到 VcXsrv 服务。

X server是Linux系统里面图形接口服务器的简称。Windows系统的界面是这个系统不可分割的一部分，各种窗口操作界面显示都是由系统核心直接管理的，而Linux的图形界面并不是系统的必要组成部分，它可以在无界面的条件下运行。当需要Linux提供界面的时候，系统就会建立一个或者数个X server，通过X协议跟窗口管理器交互，由独立于系统的应用程序来产生窗口，状态栏，按钮之类的交互界面。
比较常见的Linux界面操作环境有KDE和GNOME，为它们提供系统支持的就是X server，而并非Linux核心。总结一下linux图形界面层次关系：linux本身–>X服务器<-[通过X协议交谈]->窗口管理器（综合桌面环境）–>X应用程序。

启动 GUI 程序

接下来正常启动 GUI 程序即可，比如 Firefox：

sudo apt install firefox

# 安装完成后，启动 firefox
# 注意，这里必须用 sudo
sudo firefox

参考

  • Windows 10 配置 WSL2 以及图形界面

安装Flutter

在 Linux 操作系统上安装和配置 Flutter 开发环境 - Flutter

  1. 下载tar文件，解压到 ~/development
  2. 环境变量设置
# 把$PATH写到后面
export PATH=/home/tiansj/development/flutter/bin:$PATH
# 添加到文件末尾
vi ~/.bashrc
# 生效
source ~/.bashrc

否则执行 flutter 命令时会出现错误

/usr/bin/env: ‘bash\r’: No such file or directory

安装JDK1.8

Linux之Ubuntu20.04安装Java JDK8的两种方式

sudo apt-get install openjdk-8-jdk

安装Android Studio

下载，解压

Download Android Studio & App Tools - Android Developers

tar xvf AS文件

如何在ubuntu 上安装配置Android Studio

打开Android Studio

  1. 需要先启动Windows下的VcXsrv，在开始-应用程序里，打开XLaunch

  2. 然后在Ubuntu里执行android-studio/bin/studio.sh启动AS

    cd /home/tiansj/development/android-studio/bin
    ./studio.sh > run.log 2>&1 &

  3. OK，就像打开windows里的应用一样开发

运行Flutter

1、提示cmake不可用

Launching lib/main.dart on Linux in debug mode...
Building Linux application...
ProcessException: Failed to find "cmake" in the search path.
  Command: cmake

解决

sudo apt-get install clang cmake ninja-build pkg-config libgtk-3-dev
flutter config --enable-linux-desktop

2、CMake Error at cmake_install.cmake

flutter tools fails on flutter run -d linux
CMake Error at cmake_install.cmake:61 (file): file INSTALL cannot copy file "/home/taimoor/junkcode/desk/build/linux/debug/desk" to "/usr/local/desk": Permission denied.

解决：

fixed by running flutter clean

Linux中文字体乱码显示方框

Ubuntu默认安装包管理是apt-get和apt命令，不要使用yum安装，yum在Ubuntu 20.04上不可用

1.安装mkfontscale mkfontdir和fc-cache命令

 # 使mkfontscale和mkfontdir命令正常运行
sudo apt-get install ttf-mscorefonts-installer

# 使fc-cache命令正常运行
sudo apt-get install fontconfig

2. 安装字体

1）准备中文字体文件

从Windows C盘搜索simsun.ttc文件，就是宋体文件，或者网络下载

拷贝到 ubuntu ~/myfonts下

2 创建/usr/share/fonts/myfonts 目录 

cd /usr/share/fonts/
mkdir myfonts

3）把下载好的字体拷贝到/usr/share/fonts/myfonts目录下 

sudo cp ~/myfonts/* /usr/share/fonts/myfonts/

4）建立字体缓存

cd /usr/share/fonts/myfonts
sudo mkfontscale
sudo mkfontdir
sudo fc-cache

5）OK，重新运行，就没有中文乱码了

Ubuntu系统字体命令和字体的安装

linux生成文字变成小框框，无法正常显示汉字

安装Chrome

wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo apt install ./google-chrome-stable_current_amd64.deb

# 启动 Chrome
google-chrome

如何在Ubuntu 20.04安装Google Chrome Web浏览器

其他

  • WSL里网络和Windows网络是公用的，包括VPN
  • 输入法没有共用，没法输入中文