使用fvm与vscode搭建flutter开发环境

说明1. 下载fvm2. 配置fvm环境变量3. 下载Android Studio，并下载Android SDK版本，配置java与Android SDK环境4. 配置flutter镜像代理5. 配置 git clone github镜像代理6. 指定fvm flutter sdk 安装目录7. 下载flutter8. fvm常用命令9. 配置vscode(settings.json)10. 修改Flutter源码部分(../fvm/versions/stable(如果是指定版本这里是对应版本)/packages/flutter_tools/gradle/flutter.gradle)11. 使用Android Studio创建项目, 并指定fvm版本后修改项目源码(../android/build.gradle)拓展: 解决vscode在多版本下无法找到对应flutter的dart sdk12. 使用vs code打开项目, 右下角选择运行设备即可运行, vs code 插件

说明

如果路径中有’…/*'这种格式表示为安装目录全路径谷歌浏览器的路径指定也是全路径并且需要指定到exe或可执行文件win可以参考linux下的配置进行配置不同点在于‘export PATH=“$JAVA_HOME/bin:$PATH”’像这样的表示需要将‘$JAVA_HOME/bin’配置到PATH环境变量里面，后面的$PATH是linux语法可忽略，至于其他不带PATH的这种在win里面属于一般环境变量创建名称一致的即可,linux与win的环境变量配置的小区别是linux通过‘$*’来读取环境变量名,而win使用的是’%*%'这种方式，转换一下就可以了

1. 下载fvm

/fluttertools/fvm/releases

2. 配置fvm环境变量

export PATH="../fvm:$PATH"

3. 下载Android Studio，并下载Android SDK版本，配置java与Android SDK环境

export JAVA_HOME="../Android/Studio/jbr"export ANDROID_HOME="../Android/SDK" // 只需要配置ANDROID_HOME即可export PATH="$ANDROID_HOME/platform-tools:$ANDROID_HOME/tools:$PATH"export PATH="$JAVA_HOME/bin:$PATH"

4. 配置flutter镜像代理

export FLUTTER_GIT_URL="/flutter/flutter.git" // 用于消除github代理警告export CHROME_EXECUTABLE="../google/chrome/google-chrome-stable" // 如果系统找不到谷歌浏览器可以这样配置export PUB_HOSTED_URL="https://pub.flutter-"export FLUTTER_STORAGE_BASE_URL="https://storage.flutter-"

5. 配置 git clone github镜像代理

git config --global url."/".insteadOf "/"

6. 指定fvm flutter sdk 安装目录

fvm config --cache-path <CACHE_PATH>

7. 下载flutter

fvm install stable // 如果要指定版本号，直接使用版本号即可

8. fvm常用命令

fvm --version --- 检查fvm版本fvm config--- 查看配置fvm releases list --- 查看现有远程版本fvm list --- 查看当前安装的flutter版本fvm install xxx --- 安装指定的flutter版本fvm flutter doctor --- 检测flutter配置fvm use xxx--- 为当前项目指定flutter版本fvm remove xxx --- 删除flutter版本fvm flutter xxx --- 执行flutter指令需要在前面加上fvm

9. 配置vscode(settings.json)

"dart.flutterSdkPaths": ["../fvm/versions"]

10. 修改Flutter源码部分(…/fvm/versions/stable(如果是指定版本这里是对应版本)/packages/flutter_tools/gradle/flutter.gradle)

buildscript {repositories {// 找到这里. 加入以下镜像代理maven { url '/repository/central' }maven { url '/repository/public' }maven { url '/repository/google' }// endgoogle()mavenCentral()}}

11. 使用Android Studio创建项目, 并指定fvm版本后修改项目源码(…/android/build.gradle)

buildscript {ext.kotlin_version = '1.7.10'repositories {// 找到这里. 加入以下镜像代理maven { url '/repository/central' }maven { url '/repository/public' }maven { url '/repository/google' }// endgoogle()mavenCentral()}}allprojects {repositories {// 找到这里. 加入以下镜像代理maven { url '/repository/central' }maven { url '/repository/public' }maven { url '/repository/google' }// endgoogle()mavenCentral()}}

拓展: 解决vscode在多版本下无法找到对应flutter的dart sdk

打开命令面板 > 输入 SDK > 找到 Flutter: Change SDK 选择对应版本的 flutter即可

12. 使用vs code打开项目, 右下角选择运行设备即可运行, vs code 插件

FlutterFlutter Tree - 简化的语法创建所需的widget树Error Lens - 扩展突出显示了代码中的错误行，并在行尾附加了错误细节Dart Data Class Generator - 帮助生成构造函数等Flutter Stylizer - 统一格式化Better Comments - TODO 颜色提示Color Highlight - 颜色高亮JSON to Dart Model - json转dartFlutter Widget Snippets