一、關于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

?