一、簡(jiǎn)介
Flutter是Google在2015年推出的移動(dòng)UI框架，可快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面。Flutter可以與現(xiàn)有的代碼一起工作。
Flutter第一次亮相于2015年5月Dart開發(fā)者峰會(huì)上浦夷，初始名字叫做“Sky”，后更名為Flutter辜王，F(xiàn)lutter使用Dart語(yǔ)言開發(fā)劈狐，Dart是Google于2011年推出的新的計(jì)算機(jī)編程語(yǔ)言。
其應(yīng)用廣泛呐馆，社區(qū)活躍肥缔，因?yàn)榭梢钥缙脚_(tái)試用，開發(fā)效率還是可以的汹来。學(xué)起來(lái)學(xué)起來(lái)Ｐ拧！收班！
二坟岔、Flutter特點(diǎn)
| Flutter特點(diǎn) | |
|---|---|
| 快速開發(fā) | 由于Flutter選用了Dart作為其開發(fā)語(yǔ)言，Dart既可以是AOT（Ahead Of Time）編譯摔桦，也可以是JIT（Just In Time）編譯社付，其JIT編譯的特性使Flutter在開發(fā)階段可以達(dá)到亞秒級(jí)有狀態(tài)熱重載，從而大大提升了開發(fā)效率邻耕。 |
| 性能有約鸥咖、不依賴原生 | 使用自帶的高性能渲染引擎（Skia）進(jìn)行自繪，渲染速度和用戶體驗(yàn)堪比原生兄世。 |
| 界面更新邏輯和原生不同啼辣，采用增量渲染 | 修改控件屬性時(shí)，重新穿件一個(gè)新的Widget |
| 富有表現(xiàn)力的精美UI | Flutter內(nèi)置眾多精美的Material Design（組件的實(shí)現(xiàn)是同名的谷歌設(shè)計(jì)語(yǔ)言）和Cupertino（iOS風(fēng)格）小部件御滩，開發(fā)者可快速構(gòu)建精美的用戶界面鸥拧，以提供更好的用戶體驗(yàn)。 |
| 跨平臺(tái) | Windows艾恼、macOS住涉、Chrome OS麸锉、Linux （iOS钠绍、Android、web） |
三花沉、環(huán)境搭建（For Mac）
3.1 下載Flutter SDK
3.2 解壓SDK包
下載完成后柳爽，那么接下來(lái)就是安裝路徑了媳握。
因?yàn)镕lutter的SDK中包含了很多命令??具。我們需要配置環(huán)境變量磷脯，所以建議你安裝到你平時(shí)放命令??具 程序的地?!
cd /Users/wangxuewen/Documents/flutter
unzip ~/Downloads/flutter_macos_v2.5.2+hotfix.4-stable.zip
3.3 配置 Flutter 的 PATH 環(huán)境變量
export PATH="$PATH:`pwd`/flutter/bin"
# 驗(yàn)證 flutter 是否可用
flutter
3.4 環(huán)境檢測(cè)
# 查看當(dāng)前環(huán)境是否需要安裝其他的依賴
flutter doctor
打鉤的就是配置OK了蛾找，嘆號(hào)表示警告（下圖提示更新cocoaPods，不影響使用）赵誓，叉就是沒有配置好打毛。
3.5 更新 PATH 環(huán)境變量（全局配置）
出現(xiàn)： flutter: command not found 問題
原因：設(shè)置環(huán)境變量的時(shí)候，直接在命令行通過 export 命令進(jìn)行的俩功，并沒有全局設(shè)置幻枉，需要做如下修改。
# 將flutter/bin添加到.bash_profile或.zshrc文件中
export PATH="$PATH:[替換為FlutterSDK保存的路徑]/flutter/bin"
# 修改.bash_profile文件诡蜓，并更新環(huán)境變量 (適用于： Linux熬甫、macOS Mojave 之前的系統(tǒng))
open -e $HOME/.bash_profile
source $HOME/.bash_profile
# 修改.zshrc文件，并更新環(huán)境變量 (適用于：macOS Catalina)
open -e $HOME/.zshrc
source $HOME/.zshrc
四蔓罚、平臺(tái)配置
macOS 可以開發(fā) iOS椿肩、Android 和 Web（技術(shù)預(yù)覽版正式發(fā)布）三個(gè)平臺(tái)的 Flutter 應(yīng)用。
iOS開發(fā)環(huán)境
- 安裝 Xcode
- 配置 Xcode command-line tools (可選)
# 安裝多個(gè) Xcode豺谈，可以通過命令配置配置
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
- Xcode 的許可協(xié)議（可選）
# 打開 Xcode郑象，或者通過命令同意許可協(xié)議
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
- 配置iOS模擬器
# 運(yùn)行模擬器
open -a Simulator
Android開發(fā)環(huán)境
1. 安裝Android Studio
2. 配置SDK
根據(jù)安裝向?qū)В覀冃枰惭bAndroid SDK, Android SDK Command-line Tools, and Android SDK Build-Tools茬末，安裝過程無(wú)需翻墻扣唱。
3. 安裝Android Studio的插件
-
來(lái)到Studio的偏好設(shè)置里面.
4. 配置Android模擬器
根據(jù)以下步驟來(lái)將 Flutter 應(yīng)用運(yùn)行或測(cè)試于你的 Android 模擬器上：
- 激活機(jī)器上的 VM acceleration 選項(xiàng)团南。
- 打開 Android Studio噪沙，點(diǎn)擊 AVD Manager 按鈕，選擇 Create Virtual Device…
a. 在一些舊的 Android Studio 版本里吐根，需要通過 Android Studio > Tools > Android > AVD Manager正歼，然后選擇 Create Virtual Device… 選項(xiàng)。（只有在 Android 項(xiàng)目中才會(huì)顯示 Android 子選項(xiàng)拷橘。）
b. 如果你以及還沒打開某個(gè)項(xiàng)目局义，你可以選擇 Configure > AVD Manager 然后選擇 Create Virtual Device 選項(xiàng) - 選擇相應(yīng)的設(shè)備并選擇 Next 選項(xiàng)。
- 選擇一個(gè)或多個(gè)你想要模擬的 Android 版本的系統(tǒng)鏡像冗疮，然后選擇 Next 選項(xiàng)萄唇。推薦選擇 x86 或者 x86_64 鏡像。
- 在 Emulated Performance 下選擇 Hardware - GLES 2.0 選項(xiàng)來(lái)開啟 硬件加速术幔。
- 確保 AVD 選項(xiàng)配置正確另萤，并選擇 Finish 選項(xiàng)。
想要查看上述步驟的更多詳細(xì)信息，請(qǐng)查看 Managing AVDs 頁(yè)面四敞。 - 在 Android Virtual Device Manager 中泛源，點(diǎn)擊工具欄中的 Run 選項(xiàng)，模擬器會(huì)啟動(dòng)并為你所選擇的系統(tǒng)版本和設(shè)備顯示出相應(yīng)的界面忿危。
Web開發(fā)環(huán)境
安裝 Chrome
五达箍、Flutter常用命令
通過flutter --help查看 Flutter 常用命令
常用命令:
flutter create <output directory> 創(chuàng)建項(xiàng)目
flutter run [options] 運(yùn)行項(xiàng)目
使用: flutter <command> [arguments]
全局選項(xiàng):
-h, --help 打印幫助信息
-v, --verbose 動(dòng)態(tài)日志
-d, --device-id 目標(biāo)設(shè)備 ID 或名稱
--version 查看命令版本
--suppress-analytics 禁止分析報(bào)告
--bug-report 提交 bug
可用的命令:
analyze 分析 dart 代碼
attach 附加應(yīng)用到連接中的設(shè)備
build 構(gòu)建應(yīng)用
channel 列出或者切換通道
clean 刪除 build/ 文件夾
config 配置 flutter
create 創(chuàng)建項(xiàng)目
devices 列出已連接的設(shè)備
doctor 檢查 flutter 信息
drive Runs Flutter Driver tests for the current project.
emulators 列出可用的設(shè)備
format 格式化 Dart 文件
fuchsia_reload 熱加載
help 顯示幫助信息
install 在連接的設(shè)備中安裝 app
logs 顯示正在運(yùn)行的應(yīng)用的日志
packages 包
precache Populates the Flutter tool's cache of binary artifacts.
run 運(yùn)行應(yīng)用
screenshot 為應(yīng)用截圖
stop 停止運(yùn)行
test Run Flutter unit tests for the current project.
trace Start and stop tracing for a running Flutter app.
upgrade 更新 flutter
常見錯(cuò)誤
error 1
Could not build the application for the simulator. Error launching application on iPhone 11
造成該問題是因?yàn)樯?jí)cocoapods到最新版，按照網(wǎng)上的很多方案都未解決铺厨，flutter clean缎玫、清理xcode緩存、清理flutter緩存文件...
后面在 github flutter issues 上看到該問題的解決方案: 切換flutter分支到master
flutter channel master
執(zhí)行 flutter channel查看當(dāng)前flutter所處分支（我的flutter處于stable(穩(wěn)定)分支）解滓，
然后在官網(wǎng)上看到這一句話：
我們強(qiáng)烈建議跟蹤Flutter的stable分支碘梢，這是Flutter穩(wěn)定分支。 如果你需要查看最新的變化伐蒂，你可以跟蹤master分支煞躬，但注意這是開發(fā)分支，所以穩(wěn)定性要低得多逸邦。
要切換分支恩沛，請(qǐng)使用flutter channel stable 或 flutter channel master
還有個(gè)奇怪的問題，我這邊先切換到master然后再切回stable分支缕减，fluttter clean后flutter run運(yùn)行正常雷客。不確定是不是切換flutter分支時(shí)flutter會(huì)檢查其環(huán)境配置，把一些丟失的文件重新下載配置好桥狡。
