VS Code搭建Flutter开发环境

准备环节

1. 需下载相关软件：

   Jdk1.8、Android Studio、Visual Studio Code、Flutter SDK、Chrome；（理论上只运行Flutter web项目可以不安装AndroidStudio，但实际未做尝试）

   FlutterSdk 下载地址：https://flutter.cn/docs/get-started/install

   根据使用的操作系统，按照对应说明傻瓜式下载安装即可。

    

   
   

2. 需配置的环境变量：

   需要配置的环境变量有Flutter SDK，JDK，AndroidSDK

   根据使用的操作系统差异，也可能需要配置Chrome的路径；如系统中未安装有Android SDK可以通过AndroidStudio下载并在设置中查看AndroidSDK的路径；而后设置在环境变量中

   配置完毕后运行

   flutter --version

   来查看Flutter环境是否配置成功；

   Flutter配置成功后接下来需要配置镜像地址（如果当前网络环境可以访问国外网站或者是可以和谐上网的可以不用配置），具体配置如下：

   新增环境变量PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL

   Linux各发行版及Mac基本参考如下示例：

   #Jdk 1.8
   export JAVA_HOME=/home/kerwin/program/jdk-8
   export CLASSPATH=${JAVA_HOME}/lib
   export PATH=${PATH}:${JAVA_HOME}/bin
   
   # Flutter
   export PUB_HOSTED_URL=https://pub.flutter-io.cn
   export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

   Windows直接在计算机——属性——环境变量 中配置即可。

    

   配置完毕后运行（Linux由于环境变量需要在终端手动执行source /etc/profile刷新，或注销当前用户再次登录）；

   flutter doctor

   系统回显格式如下：

   Doctor summary (to see all details, run flutter doctor -v):
   [✓] Flutter (Channel stable, 2.0.4, on Linux, locale zh_CN.UTF-8)
   [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
   [✓] Chrome - develop for the web
   [!] Android Studio (not installed)
   [✓] Connected device (1 available)
   
   ! Doctor found issues in 1 category.
   

   如遇到有[x]的选项请注意配置对应的环境变量，或者查看相关软件是否安装正常

搭建配置

打开安装完毕的Visual Studio Code, 打开设置——扩展（Ctrl+Shift+X）分别搜索安装Dart和Flutter；需要中文显示的可以安装Chinese (Simplified) Language Pack for Visual Studio Code；安装完毕后按提示重启VS Code。到这一步，基于VS Code的Flutter开发环境基本搭建成功。

如果仍存在什么问题的，请仔细阅读提示日志，一般日志中会有提示信息。

准备开发

• 创建项目：

  在终端中可以使用flutter create

  在VSCode中打开命令面板 找到Flutter: New Project执行

• 运行项目

  调试->启用调试(F5)

  在命令面板找到Debug:Select and Start Debugging执行->选择添加配置->选择Dart&Flutter，这样就不用每次都选调试环境了。

  也可以在调试界面 选择小齿轮 选择Dart&Flutter