基于 VSCode下的 Flutter 开发

·  阅读 4983
基于 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开发了。



分类:
Android
标签: