您现在的位置是:首页 >技术交流 >使用fvm与vscode搭建flutter开发环境网站首页技术交流
使用fvm与vscode搭建flutter开发环境
简介使用fvm与vscode搭建flutter开发环境
使用fvm与vscode搭建flutter开发环境
- 说明
- 1. 下载fvm
- 2. 配置fvm环境变量
- 3. 下载Android Studio,并下载Android SDK版本,配置java与Android SDK环境
- 4. 配置flutter镜像代理
- 5. 配置 git clone github镜像代理
- 6. 指定fvm flutter sdk 安装目录
- 7. 下载flutter
- 8. fvm常用命令
- 9. 配置vscode(settings.json)
- 10. 修改Flutter源码部分(../fvm/versions/stable(如果是指定版本这里是对应版本)/packages/flutter_tools/gradle/flutter.gradle)
- 11. 使用Android Studio创建项目, 并指定fvm版本后修改项目源码(../android/build.gradle)
- 12. 使用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
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 <CACHE_PATH>
7. 下载flutter
fvm install stable // 如果要指定版本号,直接使用版本号即可
8. fvm常用命令
fvm --version --- 检查fvm版本
fvm config --- 查看配置
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
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。