为了那些不太了解Andorid SDK等命令行的人,搭建在WSL上的Flutter开发环境
或许在WSL中安装Android Studio会更方便。
作为一个 PHP 工程师,我需要搭建 Flutter 开发环境,所以我想分享一下搭建步骤。
我不太熟悉应用程序开发,对于模拟器的安装方法等并不太了解。
因此,我决定把这些交给 Android Studio 处理,而用 VSCode 进行开发可能比较好。
我认为SDK的设置针对在命令行上不太了解的人进行了优化。
同时也希望可以为希望在VSCode上进行开发的人提供参考。
最后的目标
这次的目标是通过VSCode访问WSL上的Ubuntu,然后在模拟器上运行演示用的Flutter应用程序。
开发环境
Windows 11是可用的操作系统(这很重要)。由于Windows 11支持wslg,因此可以通过Ubuntu来使用图形界面工具。
Windows Subsystem for Linux 的配置()
暂时以管理员权限打开PowerShell,然后使用以下命令更新WSL。
如果不更新,可能无法使用WSLG功能。
power shell) wsl --update
power shell) wsl -l -v // これでwsl内のディストリビューションを確認
如果你的WSL环境没有Ubuntu,请安装它。
power shell) wsl --install -d Ubuntu20.04
请进行适当的初始设置,因为Ubuntu会自动打开。
Ubuntu的配置
让我们从PowerShell登录到Ubuntu。
登录后,由于会指向Windows的主目录,所以我们要切换到Ubuntu的主目录。
power shell) wsl -d Ubuntu-20.-4
Ubuntu) pwd
/mnt/c/Users/ユーザー名
Ubuntu) cd ~/
Ubuntu) pwd
/home/ユーザー名
Ubuntu) echo 'cd ~' >> ~/.bashrc // これを打つと次回からはUbuntu側のホームディレクトリから始まります
更新Ubuntu的内部。
Ubuntu) sudo apt -y update && sudo apt -y upgrade
Ubuntu) sudo apt install unzip // あとで使用します
如果无法进行KVM设置(如果无法在此处进行设置,则模拟器无法正常运行)。
由于我也不太了解,所以我会毫无思考地继续做下去。
首先,如果没有这个,模拟器就无法运行。
参考: Linux位于下方。
Ubuntu) sudo apt-get install cpu-checker
Ubuntu) egrep -c '(vmx|svm)' /proc/cpuinfo
1以上の数字が出れば問題ないらしいです。
Ubuntu) kvm-ok
KVM acceleration can be used // これが出れば問題ないらしいです。
Ubuntu) sudo apt-get install qemu-kvm libvirt-daemon-system libvirt-clients bridge-utils
Ubuntu) sudo adduser ユーザー名 kvm
Ubuntu) echo 'sudo chown ユーザー名 /dev/etc' >> ~/.bashrc // wslログイン時にkvmの所有権を変更
我会重新启动wsl。
Ubuntu) exit
power shell) wsl -t Ubuntu-20.04 // シャットダウン
power shell) wsl -d Ubuntu-20.04 // 再ログイン
安装Flutter

Ubuntu ~) mkdir development
Ubuntu ~) cd ~/development
Ubuntu development) wget コピーしたリンク
Ubuntu development) tar xf ダウンロードされたファイル
Ubuntu development) rm ダウンロードしたファイル(解凍したほうでないです)
我会确认一下版本信息,以防万一。
Ubuntu) ~/development/flutter/bin/flutter --version
バージョン情報
Ubuntu) ~/development/flutter/bin/dart --version
バージョン情報
我会为您通过密码。
Ubuntu) sudo ln -s ~/development/flutter/bin/flutter /usr/bin/flutter
Ubuntu) sudo ln -s ~/development/flutter/bin/dart /usr/bin/dart
我知道有很多可能性,但我想先打出来。
Ubuntu) flutter doctor -v
我们还可以创建一个示例项目。
Ubuntu ~) flutter create sample
安卓开发工具(Android Studio)的设置

暂时先把下载放置在~/development以下。
Ubuntu) cd ~/development
Ubuntu development) wget コピーしたアドレス
根据公式文档的Linux部分,将其解压到/usr/local目录下。
Ubuntu) cd /usr/local
Ubuntu /usr/local) sudo tar -zxvf ~/development/ダウンロードファイル
Ubuntu) /usr/local/android-studio/bin/studio.sh // android studioが立ち上がる
一旦打开Android Studio,随意点击同意选项即可。




Visual Studio Code 的设置
我会安装扩展功能。



打开VSCode终端并运行应用程序。
Ubuntu) cd ~/sample // サンプルディレクトリに移動
Ubuntu) flutter run

现在我们可以使用VSCode进行开发了。
添加:Android Studio的配置

一旦安装了Flutter和Dart的插件之后,会在顶部显示“main.dart”,只要点击播放按钮,应用程序就会在模拟器上运行。
如果设备旁边没有显示“main.dart”,我认为你可以多次刷新选择框,它就会出现。

总结
以上的设定已完成。
借助VSCode,我们能够运行模拟器并进行应用开发。
虽然可以通过命令行使用SDK manager安装模拟器,但对于我这个初学者来说,我认为这种方法更易理解。
如果需要进行其他与Android相关的安装,建议使用Android Studio。
文献引用
在WSL 2的Ubuntu 22.04上创建一个干净的开发环境来使用Flutter 3 (えみ)
安装Android Studio文件1
安装Android Studio文件2
设置Android模拟器的硬件加速
加快KVM和Ubuntu的Android Studio模拟器速度