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

说明

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://kgithub.com/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="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"

5. 配置 git clone github镜像代理

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

6. 指定fvm flutter sdk 安装目录

fvm config --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 '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()
    }
}

11. 使用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()
    }
}

12. 使用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