學習筆記：flutter項目搭建(mac版)

什么是flutter

Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生用戶界面。 Flutter可以與現有的代碼一起工作。在全世界，Flutter正在被越來越多的開發者和組織使用，並且Flutter是完全免費、開源的。

flutter具有以下幾個優點

• 快速開發(具有熱加載功能，類似於webpack配置的devServer的熱加載)
• 富有表現力，漂亮的用戶界面
• 現代的，響應式框架（State類，通過調用setState，改變對應的值，widget就會重新渲染）
• 訪問本地功能和SDK
• 統一的應用開發體驗

移動端解決方案的幾個階段

1. webview在原生app中嵌入h5頁面
2. hybrid 通過JSBridge來做native與非native之間的橋梁（本質還是web模式）
3. react-native 將view編譯成原生的view從而達到良好的體驗，但還是需要JSBridge做連接
4. Flutter 吸收了前者的教訓之后,在渲染技術上,選擇了自己實現(GDI)

reactive-native原理圖

flutter實現原理

開始搭建flutter

使用鏡像

flutter官方為中國開發者搭建了臨時鏡像，大家可以把下面的環境變量加到用戶的環境變量中mac直接vim ~/.bash_profile修改即可，如果用了zsh 也可~/.zshrc,修改完source ~/.bash_profile即可

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

獲取Flutter SDK

傳送門需要翻牆，或者直接去github下載安裝包

下載完解壓，然后添加flutter到相關工具的path中export PATH=pwd/flutter/bin:$PATH

注意pwd為你解壓flutter安裝包的路徑

運行flutter

運行flutter doctor來查看還有什么東西沒有安裝，然后根據提示安裝相應的東西即可

創建一個flutter項目

以上所有安裝都完畢后可以再terminal通過flutter create 目錄名來創建項目，然后執行open -a Simulator打開蘋果手機模擬器

安裝下面的包來確保能進行ios模擬調試

brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup

在你Flutter項目目錄中通過 open ios/Runner.xcworkspace 打開默認的Xcode workspace.最后執行flutter run你的第一個flutter項目就跑起來了

flutter推薦的編輯器有vscode以及Android studio安裝對應的插件即可

詳細安裝教程可以具體看flutter官網，本教程為自己的學習筆記，后面會另外開文如何使用flutter來進行開發