進來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開發了。