基于 VSCode下的 Flutter 开发

       进来Flutter的热度只增不减，前段时间从环境-dart-生命周期-应用现状-性能等都进行了解，因而写一点文章与你们分享和讨论。

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编辑器 + Xcode 的ios 模拟器。

之因此推荐使用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的模式快速开发。

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开发了。