Flutter系列：1.開發環境配置

DandJ發表於2018-11-06
Flutter開發環境

前言

Flutter是Google推出的跨平臺App開發SDK，通過自己實現高效能引擎相較於RN和Weex的JS橋接方案有本質的效能優勢，具體原理對比可以閱讀此文移動端跨平臺開發的深度解析進一步瞭解。

筆者作為一名iOS開發者對Flutter的高效能跨平臺方案有著濃厚的興趣，作為學習目的，打算通過實現一些簡單的Demo的形式來分享自己學習的過程，希望同大家共同交流學習，共同進步。

Flutter為什麼選擇Dart語言

兩個最主要的原因就是Dart有2個重要的特徵：JIT和AOT, 基於JIT的開發模式支援Hot Reload(熱載入)，加速開發週期；AOT的編譯器可以生成更加高效的ARM程式碼，可以快速啟動並擁有可預測的生產部署效能。Learn More

開發環境

  • 機器：macbookPro macOS v10.14
  • Flutter SDK: flutter_macos_v0.9.4-beta
  • IDE: VSCode (Xcode Version 10.0)
  • 測試平臺：iOS

開發環境配置

Flutter下載

點選下載sdk flutter_macos_v0.9.4-beta.zip ，其他版本 點我前往

開啟命令列，解壓sdk到指定路徑, 例如個人使用者目錄下自己建立的Flutter資料夾，也可以手動解壓

 cd ~/Flutter
 unzip ~/Downloads/flutter_macos_v0.9.4-beta.zip
複製程式碼

環境變數配置

在使用者根目錄下開啟或者新建 .bash_profile 檔案，新增以下配置：

# Flutter
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=~/Flutter/flutter/bin:$PATH
複製程式碼

其中前2行是專為中國開發者配置的代理，第3行為新增Flutter到PATH。要求為存放'Flutter/bin'的路徑，筆者的路徑為'~/Flutter/flutter/bin'

執行以下命令使.bash_profile的修改生效

source $HOME/.bash_profile
複製程式碼

列印path，驗證flutter/bin是否在其中

echo $PATH
複製程式碼

執行安裝Flutter依賴

flutter doctor
複製程式碼

不出意外，到此為止Flutter安裝成功。

注意: 如果你使用的是zsh，終端啟動時 ~/.bash_profile 將不會被載入，解決辦法就是修改 ~/.zshrc ，在其中新增：source ~/.bash_profile

VSCode安裝配置

下載最新版VSCode 點選去官網下載 解壓後拖到應用程式目錄即可直接執行VSCode

安裝Flutter外掛

選擇Extensions，輸入Flutter 點選Install安裝，安裝後需要點選Reload方可載入外掛，如下圖

Flutter系列：1.開發環境配置

驗證Flutter

依次點選VSCode選單欄 View->Command palette

然後輸入'doctor'選擇 'Flutter: Run Flutter Doctor'命令執行

建立第一個Flutter APP

命令列執行命令開啟iOS模擬器

open -a Simulator
複製程式碼

依次點選VSCode選單欄 View->Command palette 然後輸入'Flutter', 選擇'Flutter: New Project' 命令執行，然後輸入工程名字 'myapp' (工程名只能小寫)建立第一個Flutter APP

點選Debug->Star Debugging 或者F5快捷鍵執行APP, (首次執行會提示選擇環境，選擇Dart&Flutter) VSCode會自動編譯並執行到模擬器，如圖：

Flutter系列：1.開發環境配置

這是預設工程的APP, 顯示一行提示文案，按鈕點選次數以及一個+按鈕，點選按鈕後次數顯示數字將不斷增加。

Hot Reload

Flutter 提供熱載入功能，在Debugging狀態下編輯修改程式碼直接儲存後，便可以載入相應的修改，而並不需要重啟除錯，大大提升開發速度。

注意：Debug模式下，啟用Dart的JIT模式，故支援Hot Reload；而Release模式下，啟用的是Dart的AOT模式，此模式會做一些優化故不支援Hot Reload。

修改lib/main.dart第93行提示文案為：

'You have clicked the button this many times:',
複製程式碼

然後儲存，app上的文案就會直接更新，而不需要重新編譯執行。

參考

Flutter 官網配置指南

相關文章