基于 VSCode下的 Flutter 开发

近来Flutter的热度只增不减，其以直逼原生应用的高性能、响应式开发、一套代码双端甚至多端运行等的特点被大家流传。这篇文章就跟大家分享在VS Code下的Flutter的开发体验，以及热重载、debug等体验。

1. Flutter 简介

Flutter是google于2018年推出的开源移动应用开发框架，官网上的描述是——“可以快速在iOS和Android上构建高质量的原生用户界面”。Flutter号称可以够建接近原生体验的用户界面。

那么Flutter有哪些特点？如何能接近原生体验？

Flutter的主要两个特点：

Flutter使用自己的图形引擎Skia，抹平了平台（android/ios）差异
使用高性能语言dart开发

这两个特点也是Flutter跨平台和高性能的主要原因。后面的文章再细细道来。

2. Flutter开发环境搭建

Flutter 的环境搭建Flutter官网有详细说明，这里简要介绍一下。

2.1 flutter运行环境搭建

使用镜像

export PUB_HOSTED_URL=https://pub.flutter-io.cn 
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

下载Flutter SDK，并配置path，这里以macos为例

export PATH=`pwd`/flutter/bin:$PATH

pwd是你所下载到本地的Flutter SDK的目录。

运行 flutter doctor ，检查环境，按照提示安装缺少的包，直到运行flutter doctor 无错误提示。

2.2 编辑器选择及模拟器安装

flutter开发的编辑器可以随意选择， Android Studio/VS Code/Xcode。从轻量和使用方便的角度推荐VS Code编辑器 + 模拟器。

为什么推荐VS Code？

第一，因为VS Code本身特点：

VS Code非常轻量，而且功能强大。
官方有提供VS Code的Flutter插件，可以轻松的在VS Code 上利用flutter的脚手架命令一键初始化flutter工程。
官方提供Dart插件，Dart插件提供了Dart DevTools使得在页面ui开发的时候可以在网页上查看页面widget树结构和参数，并像客户端开发那样模拟性能图谱，类似于react dev tools。
开发时可以轻松的使用VS Code的debug模式在本地断点调试。
VS Code可以快速连接模拟器，可以在模拟器上以hot reload的模式快速开发。

第二， Google 工程师 Xiao Yu 在 6 月成功举办的 2018 全球大前端技术大会（GMTC）中进行的关于Flutter的演讲视频中使用的编辑器也是VS Code

视频连接戳这——使用 Flutter 快速构建美观又高性能的移动应用

PS:  选择VS Code开发并不意味着，你不需要安装Android Studio和Xcode。
为了android开发Flutter应用，需要安装Android Studio来安装Android SDK以及方便在Android设备上运行并测试您的Flutter应用。
为了使用ios模拟器需要安装Xcode。

3. VS code下的Flutter开发

安装VS Code就不用多说了，下面告诉大家如何利用VS Code快速起一个flutter项目、如何利用模拟器hot reload、如何debug。

3.1 VS Code的三个插件安装

1. Flutter插件——提供脚手架及flutter在vscode里的debugger

cmd + shift + x 打开VS Code Extentions 
输入flutter 点击install

2. Dart插件——提供Dart devTools

安装Flutter插件会自动安装dart插件，无需再安装

3. Dart (Syntax Highlighting Only)插件——dart语法高亮

需要单独安装，同Flutter安装，不赘述。

3.1 创建Flutter项目

打开VS Code命令面板

Cmd + shift + p（或者View>Command Palette ...)  
输入 Flutter： New project

选择并输入项目名称回车，选择存放路径

便初始化了一个flutter demo工程。

3.2 打开模拟器

这里使用xcode的模拟器，安装xcode之后，在命令行运行

open -a simulator

打开xcode模拟器

3.3 hot reload开发

按F5 （或者Debug>Start Debugging）

就可以看到模拟器上已经运行起来刚才创建的flutter项目，这时更改代码，然后Cmd +s模拟器界面会自动个更新，也就是所谓的hot reload的开发模式。

3.4 调试

1. VS Code断点调试

直接在VS Code代码函数前面点击，出现红点就打上了断点，点击debug 条上绿色restart 按钮，断点查看。

2. Dart DevTools

VS Code里打开 Dart DevTools调试

Cmd + shift + p （或者 View > Command Palette...）
输入 Dart：Open DevTools

选择Dart：Open DevTools 就会在浏览器打开调试界面：

可以

调试UI layout
查看widget的状态
UI 性能诊断
查看日志

到此你就可以愉快的进行Flutter开发了。