为了那些不太了解Andorid SDK等命令行的人,搭建在WSL上的Flutter开发环境

或许在WSL中安装Android Studio会更方便。

作为一个 PHP 工程师,我需要搭建 Flutter 开发环境,所以我想分享一下搭建步骤。
我不太熟悉应用程序开发,对于模拟器的安装方法等并不太了解。
因此,我决定把这些交给 Android Studio 处理,而用 VSCode 进行开发可能比较好。

我认为SDK的设置针对在命令行上不太了解的人进行了优化。
同时也希望可以为希望在VSCode上进行开发的人提供参考。

最后的目标

这次的目标是通过VSCode访问WSL上的Ubuntu,然后在模拟器上运行演示用的Flutter应用程序。

开发环境

WindowsUbuntuFlutter1120.043.05

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

image.png
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)的设置

image.png

暂时先把下载放置在~/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,随意点击同意选项即可。

image.png
image.png
image.png
image.png

Visual Studio Code 的设置

我会安装扩展功能。

image.png
image.png
image.png

打开VSCode终端并运行应用程序。

Ubuntu) cd ~/sample // サンプルディレクトリに移動
Ubuntu) flutter run
image.png

现在我们可以使用VSCode进行开发了。

添加:Android Studio的配置

image.png

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

image.png

总结

以上的设定已完成。
借助VSCode,我们能够运行模拟器并进行应用开发。
虽然可以通过命令行使用SDK manager安装模拟器,但对于我这个初学者来说,我认为这种方法更易理解。
如果需要进行其他与Android相关的安装,建议使用Android Studio。

文献引用

在WSL 2的Ubuntu 22.04上创建一个干净的开发环境来使用Flutter 3 (えみ)
安装Android Studio文件1
安装Android Studio文件2
设置Android模拟器的硬件加速
加快KVM和Ubuntu的Android Studio模拟器速度