什麼是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

傳送門需要FQ，或者直接去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來進行開