Flutter Web 开发环境搭建

操作系统为Debian Buster

安装Android Studio

首先安装一些依赖包:

sudo dpkg --add-architecture i386
sudo apt update
sudo apt install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386

然后, 从这里下载Linux 64bit的Android Studio

解压缩下载下来的解压包到用户目录.

tar -xzvf android-studio-ide-193.6626763-linux.tar.gz -C ~/

然后运行:

cd ~/android-studio/bin
./studio.sh

按照向导完成配置, 进入Andriod Studio欢迎界面, 点击右下角的Configure - Plugins, 搜索并安装Flutter插件.

安装Flutter SDK

参考这里

安装依赖

sudo apt update
sudo apt install curl file git unzip zip xz-utils libglu1-mesa

克隆flutter仓库

cd ~/
git clone https://github.com/flutter/flutter.git
cd flutter && git checkout stable

将如下环境变量添加到~/.bashrc, 然后重启shell.

# 使用中国节点加速下载
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH="$PATH:~/flutter/bin"

flutter命令的执行需要联网下载某些需要的程序, 国内网络下载很慢, 可以在运行这些命令之前, 设置一下代理.

export http_proxy=http://192.168.43.1:1080/
export https_proxy=http://192.168.43.1:1080/

当然, 前提是有一个可以工作的代理.

此代理设置仅仅对当前的shell环境生效, 退出当前shell后失效, 下一次打开一个新的shell时要重新设置.

预安装一些开发包:

flutter precache -v

禁止遥测:

flutter config --no-analytics

接受licenses:

flutter doctor --android-licenses

安装Chrome

从google官网下载chrome, 选择.deb格式.

进入下载目录, 执行命令安装:

sudo dpkg -i google-chrome-stable_current_amd64.deb
sudo apt install -f
sudo dpkg -i google-chrome-stable_current_amd64.deb

安装VS CODE的flutter插件

在VS CODE的插件管理页面搜索并安装flutter. 参考

Flutter SDK开启WEB支持

参考

flutter channel beta
flutter upgrade
flutter config --enable-web

执行命令检查设备:

flutter devices

输出应该有两条,一条为Chrome, 另一条为web server:

2 connected devices:

Web Server (web) • web-server • web-javascript • Flutter Tools
Chrome (web)     • chrome     • web-javascript • Google Chrome 85.0.4183.83

创建工程

参考1和2

在VS CODE里创建工程

View > Command Palette, 输入Flutter: New Project, 回车.

输入项目名称, 选择存放目录, 然后等待项目创建完成. 完成后, IDE会显示main.dart文件.

右下角的Device选择Chrome. 然后按F5键开始debug.

命令行创建工程

flutter create myapp
cd myapp
flutter run -d chrome

构建工程

执行

flutter build web

生成的文件位于build/web, 参考部署文档.