基於 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開發了。