VS Code 集成 flutter dart 开发

一、关于Flutter

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。

https://flutterchina.club/

设置服务器镜像：

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

# windows  set 为临时设置，sets 为永久设置，/m 为设置系统环境变量
setx PUB_HOSTED_URL https://pub.flutter-io.cn /m
setx FLUTTER_STORAGE_BASE_URL https://storage.flutter-io.cn /m

二、安装Flutter SDK

以下以win10为例

1、Git 安装

工具：Git、Vs Code，如果开发android 应用需要安装Android SDK。

https://github.com/flutter/flutter

git clone https://github.com/flutter/flutter.git

2、离线安装：

https://github.com/flutter/flutter/releases

https://flutter.dev/docs/get-started/install

下载完后解压到某个目录，比如D:\Flutter\，然后将 flutter添加到系统环境变量

setx "Path" "D:\flutter\bin;%path%" /m

运行 flutter doctor 检测配置是否成功

将 D:\flutter\.pub-cache\bin 和 D:\flutter\bin\cache\dart-sdk\bin 添加到系统环境变量

setx "Path" "D:\flutter\.pub-cache\bin;%path%" /m
setx "Path" "D:\flutter\bin\cache\dart-sdk\bin;%path%" /m

# 查看flutter版本
$ flutter --version
Flutter 1.9.1+hotfix.6 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 68587a0916 (2 months ago) • 2019-09-13 19:46:58 -0700
Engine • revision b863200c37
Tools • Dart 2.5.0

# 查看dart版本
$ dart --version
Dart VM version: 2.5.0 (Fri Sep 6 20:10:36 2019 +0200) on "windows_x64"

3、在VS Code 扩展里搜索flutter 进行安装，同时会自动安装dart。

4、搭建Web App开发环境

将 C:\Users\guoguo\AppData\Roaming\Pub\Cache\bin 添加到系统环境变量

（Pub是Dart的包管理工具，类似npm，捆绑安装。）

$ setx "Path" "C:\Users\guoguo\AppData\Roaming\Pub\Cache\bin;%path%" /m

开启flutter web

$ flutter config --enable-web

安装 webdev

$ pub global activate webdev

安装 stagehand

$ pub global activate stagehand

创建web应用

# 在项目工程目录（空）运行，或者用Vs Code打开工程目录，在 TERMINAL 运行$ stagehand web-simple ……
--> to provision required packages, run 'pub get'

执行命令行'pub get'，加载所有依赖包

$ pub get

自动生成的应用目录结构

运行web服务

$ webdev serve

用浏览器打开信息提示的应用地址： http://127.0.0.1:8080/ 预览

打包命令

webdev build