vs code 搭建flutter运行环境（mac)

以前开发过hybrid app，用的是webview渲染，因为webview的体验会没有原生的体验好，因此对跨端原生开发燃起了学习的兴趣，在react-native和flutter之间纠结，

看了网上的一些对比，虽然flutter比较新，用的又是新的dart语言, 但貌似在兼容性上要优于reactive-native, 闲鱼团队就用了flutter,因而就决定从flutter入手。

做为一名前端开发，在flutter支持的几种编辑器中仍是用vs code比较顺手，因而打算用vs code来配置flutter开发环境

先跟着官网进行前几步基础安装程序，前几步官网上有的基础配置，最好跟着官网来，博客会过期，官网会更新。。

1. 安装flutter

 export PUB_HOSTED_URL=https://pub.flutter-io.cn
 export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
 git clone -b dev https://github.com/flutter/flutter.git

若是要更新环境变量

vim ~/.bash_profile 进入文件添加系统变量路径

export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH  //注意： 为你flutter的路径，好比“~/document/code”PATH_TO_FLUTTER_GIT_DIRECTORY

运行 source $HOME/.bash_profile 刷新当前终端窗口.

查看环境变量是否在已经在PATH中:

echo $PATH

至于环境变量，须要添加flutter路径以及jdk和andriod sdk路径 

注意：这些对应的具体路径改为本身对应的目录路径

export PATH=/Users/username/flutter/bin:$PATH
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_202.jdk/Contents/Home
export CLASSPATH=$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar
export PATH=$JAVA_HOME/bin:$PATH
export ANDROID_SDK_ROOT=/Users/username/software/android-sdk
export ANDROID_HOME=$ANDROID_SDK_ROOT
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools 
export PATH=$PATH:$ANDROID_HOME/build-tools/28.0.3

  

2. 安装dart sdk

brew tap dart-lang/dart
brew install dart

若是没有安装Homebrew的，须要先安装 https://brew.sh/

 

3. vs code 配置

vs安装dart和flutter扩展

查看是否安装成功

command+shift+p

Flutter: Run Flutter Doctor

新建项目demo

Flutter:New Project

若是新建项目出现了这样的项目目录，说明已经新建成功了，若是没有，那须要检查一下jdk、android-sdk，jdk的版本必定要是1.8的。

添加系统变量等操做，完成以后运行 Flutter:Launch emulater 就能够看到模拟器, 最后执行flutter run 就能够看到项目已经在模拟器里运行起来了。

至此，demo才算跑起来，而后按照提示改lib/main.dart文件的东西，按r键热加载，就能够看到改动以后的效果了。

 

4. 一些坑

在vs插件安好了以及flutter sdk, dart sdk安装完成以后，准备新建一个项目，新建项目以前先运行flutter doctor。。不行。。貌似在安装什么插件。。等了很久，没有成功。这个时候flutter create myapp显然是没有成功的。

因而才知道要安装jdk, android sdk。。安完以后添加到系统变量。。嗯。而后新建项目，此次成功了，项目目录出来了，然而准备跑起来的时候flutter run的时候报错

Unable to locate a development device; please run 'flutter doctor' for information about
installing additional components.

额，好吧，那运行flutter doctor ...出现一堆错误

根据上面的报错提示，更新了安卓sdk, 而后出现Android license status unknown报错，

根据提示 update sdkmanager

仍是报错 Exception in thread “main” java.lang.UnsupportedClassVersionError ，这个错误是由于jdk版本不对，java --version 查看版本

jdk 版本要是1.8的，其余版本不行。。先开始安装的是12，就一直报错换成1.8以后，flutter doctor --android-licenses 而后就成功了 这个错误解决

最后是，项目的新建及目录没问题以后，在运行以前要有模拟器或是usb链接真机，模拟器的问题，在mac上安装了xcode就会出现可运行的ios模拟器，运行就能够看到效果了

 

关于模拟器

ios模拟器的话是须要安装xcode的，安装完xcode运行flutter doctor若是提示版本低让升级的话，能升级就升级吧，不能升级好像也不要紧，个人因为mac系统升级出了点问题，没法升级，因此xcode也没法升级，因此就用的仍是九点几的版本 ，但运行项目的时候，运行模拟器是会出现ios模拟器的

安卓虚拟机的安装（其实不用安装，虚拟机还慢，还不如真机use调试）过程的尝试比较曲折 jdk，android-sdk等一系列环境都配置好以后，用vscode来直接建立的话也报错，根据提示运行安装sdkmanager "system-images;android-27;google_apis_playstore;x86"

也并无论用。。。再试仍是提示这个

没办法，那只能另找方法新建一个安卓模拟器了

因为安卓的版本升级，网上的不少方法都是低版本的sdk用可视化工具来进行安装的，android命令也被废弃

如今用的命令是sdkmanager和avdmanager  利用sdkmanager来安装能够的system-image

 运行avdmanager，出现如下提示 

 根据这个提示来新建安卓虚拟机

avdmanager [global options] create avd [action options]

example 

avdmanager create avd -n testAvd -k "system-images;android-25;google_apis;x86"

testAvd 是本身起的名字 -k后面是类型必填的

global options是上面的几个命令  action options 下面对应的命令及其含义进行相应的配置

完成以后再在vscode里面 launch emulator 就能看到新建的安卓虚拟机选项了

 

若是没有安装emulator目录，sdkmanager emulator安装。

通过断断续续的折腾，终于在mac上安装成功ios模拟器和安卓模拟器，win10下安装成功安卓模拟器

最后，总结下，因为以前没配置过Android sdk，因此在这个事上折腾的比较久，老版的Android sdk是能够用图形界面来安装操做，新版的都换成用sdkmanager命令来安装sdk下的其余目录如platform-tools目录，emulator目录等和avdmanager命令来create avd建立虚拟机，若是要建立安卓虚拟机，Android sdk下的system-iamges文件夹必定要有

再有就是在配置环境变量的过程当中要注意，一不当心手抖打错字就可能致使运行失败，mac和win上的环境变量的配置方式包括路径等也有些不一样，也是须要注意下的。

固然，除了在虚拟机上运行调试，其实也能够不安装虚拟机，直接用usb连真机调试更好。