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

前言

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

依次點擊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會自動編譯並運行到模擬器，如圖：

這是默認工程的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 官網配置指南