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

说明

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

1. 下载fvm

https://github.com/fluttertools/fvm/releases
1

2. 配置fvm环境变量

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

3. win下设置别名

1. 'win + r' 输入 regedit
2. 计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Command Processor
3. 新建字符串 'AutoRun=D:\Software\FVM\Script\fvm_help.bat'
4. fvm_help.bat内容如下:
@echo off
doskey flutter=fvm flutter $*
doskey dart=fvm dart $*
1
2
3
4
5
6
7

4. 配置flutter版本缓存路径

FVM_CACHE_PATH=D:\Software\FVM\CACHE
1

5. fvm常用命令

fvm --version             --- 检查fvm版本
fvm config                --- 查看配置
fvm releases              --- 查看现有远程版本
fvm list                  --- 查看当前安装的flutter版本
fvm install xxx           --- 安装指定的flutter版本
fvm flutter doctor        --- 检测flutter配置
fvm use xxx               --- 为当前项目指定flutter版本
fvm global                --- 指定全局flutter版本
fvm remove xxx            --- 删除flutter版本
fvm flutter xxx           --- 执行flutter指令需要在前面加上fvm
1
2
3
4
5
6
7
8
9
10

6. VSCode 配置sdk

// settings.json 添加如下配置
"dart.flutterSdkPaths": [
    "fvm/CACHE/default"
],
"dart.flutterSdkPath": "fvm/CACHE/default",
1
2
3
4
5

7. 下载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"
1
2
3
4

8. 配置flutter镜像代理

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

9. 配置 git clone github镜像代理

git config --global url."https://kgithub.com/".insteadOf "https://github.com/"
1

10. 配置vscode(settings.json)

"dart.flutterSdkPaths": [
        "../fvm/versions"
]
1
2
3

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

buildscript {
    repositories {
        // 找到这里. 加入以下镜像代理
	    maven { url 'https://maven.aliyun.com/repository/central' }
        maven { url 'https://maven.aliyun.com/repository/public' }
        maven { url 'https://maven.aliyun.com/repository/google' }
        // end
        google()
        mavenCentral()
    }
}
1
2
3
4
5
6
7
8
9
10
11

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

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

allprojects {
    repositories {
        // 找到这里. 加入以下镜像代理
        maven { url 'https://maven.aliyun.com/repository/central' }
        maven { url 'https://maven.aliyun.com/repository/public' }
        maven { url 'https://maven.aliyun.com/repository/google' }
        // end
        google()
        mavenCentral()
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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

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

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

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