Flutter入門實(shí)踐成功陷谱！
現(xiàn)整理筆記，歡迎嘗試使用[呲牙]
零瑟蜈、掃盲
一烟逊、 準(zhǔn)備工作
二、 下載 Flutter铺根、配置 Flutter 環(huán)境變量宪躯、配置 Flutter 鏡像
三、 運(yùn)行 flutter doctor 命令檢測環(huán)境
四位迂、 配置 Flutter Ios 環(huán)境
五访雪、 命令行工具生成 Flutter 項(xiàng)目
六、 修改 Flutter Sdk 目錄的權(quán)限以及項(xiàng)目的權(quán)限.
七掂林、 Xcode 打開 flutter 項(xiàng)目 模擬器運(yùn)行項(xiàng)目
八臣缀、 在 Vscode 中配置 開發(fā) Flutter 項(xiàng)目
零、掃盲
Flutter是谷歌公司基于Dart語言開發(fā)的一款開源泻帮、免費(fèi)的移動(dòng)UI框架精置，可以讓我們快速的在Android和Ios上構(gòu)建高質(zhì)量App，它最大的特點(diǎn)就是跨平臺(tái)刑顺、以及高性能氯窍。它針對(duì)的開發(fā)者是全部開發(fā)者，它的性能相比RN蹲堂、Ionic這樣的框架要好一些狼讨。
Flutter 基于谷歌的 Dart 語言，如果沒有任何 Dart 語言的基礎(chǔ)柒竞，不建議直接學(xué)習(xí) Flutter政供。建議先學(xué)習(xí) Dart 語言的基本語法。然后再進(jìn)入 Flutter 的學(xué)習(xí)朽基。
一布隔、準(zhǔn)備工作
- 升級(jí) Macos 系統(tǒng)為最新系統(tǒng)
- 安裝最新的 Xcode
- 電腦上面需要安裝
brewhttps://brew.sh/
二、下載 Flutter稼虎、配置 Flutter 環(huán)境變量衅檀、配 置 Flutter 鏡像
1、下載 Flutter SDK
2霎俩、安裝Flutter Sdk 的目錄
把下載好的 Flutter SDK 隨便解壓到你想安裝 Sdk 的目錄,這里我安裝的是：/Users/zhangli/Documents/Flutter_mac/flutter
3哀军、把 Flutter 安裝目錄的 bin 目錄配置到環(huán)境變量沉眶，然后把 Flutter 國內(nèi)鏡像也配置到環(huán)境變量里面
在終端輸入以下命令進(jìn)行編輯文件
vim ~/.bash_profile
查看是否有以下配置環(huán)境變量，沒有的話按鍵盤字母i進(jìn)行編輯杉适。
// 路徑要使用你上面放置Sdk的目錄路徑
export PATH=/Users/zhangli/Documents/Flutter_mac/flutter/bin:$PATH
路徑是根據(jù)你放置下載文件的路徑來寫的谎倔，所以自己要清楚路徑才行。如果不能使用梯子的還需要在環(huán)境變量里配置一下Pub源猿推，不然無法使用片习，可以直接接著下面增加兩行配置
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
編輯完成后，按esc,接著輸入：wq進(jìn)行保存文件退出蹬叭。
查看編輯成功后藕咏，可按esc,接著輸入：q直接退出。
或者使用該命令打開直接修改編輯具垫。
open ~/.bash_profile
輸入以下命令使其配置環(huán)境變量更新成功
source ~/.bash_profile
flutter -h （獲取幫助信息）如果能出來一些命令說明 flutter sdk 配置成功侈离。
注意如果配置完成后輸入 flutter -h 告訴你 flutter 不是內(nèi)置命令之類的錯(cuò)誤的話，可能 sdk沒有配置成功筝蚕，也可能 sdk 下載的時(shí)候沒有下載全
三卦碾、運(yùn)行 flutter doctor 命令檢測環(huán)境
第一次運(yùn)行 flutter doctor 的時(shí)候會(huì)提示下面錯(cuò)誤
? libimobiledevice and ideviceinstaller are not installed. To install with Brew, run:
brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice brew install ideviceinstaller
? ios-deploy not installed. To install: brew install ios-deploy
? CocoaPods not installed.
CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.
Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
For more info, see https://flutter.dev/platform-plugins
To install:
brew install cocoapods pod setup
四、 配置 Flutter Ios 環(huán)境
我這里之前學(xué)習(xí)Dart基礎(chǔ)語言時(shí)起宽，已經(jīng)安裝過brew洲胖，如果我們已經(jīng)安裝過brew的話，運(yùn)行: flutter doctor 如果出來下圖表示 ios 的環(huán)境配置完成
[圖片上傳失敗...(image-8d37d0-1584612652365)]
1坯沪、如果電腦上面沒有安裝 brew 的話首先第一步需要安裝 brew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
2绿映、分別執(zhí)行下面命令
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice brew install ideviceinstaller
brew install ios-deploy
brew install cocoapods
pod setup
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup
注意:如果運(yùn)行命令失敗請(qǐng)運(yùn)行brew doctor 并按照說明解決問題。
執(zhí)行完成上面命令后然后重新運(yùn)行: flutter doctor 如果出來下圖表示 ios 的環(huán)境配置完成
五腐晾、命令行工具生成 Flutter 項(xiàng)目
sudo flutter create flutterdemo
六叉弦、修改 Flutter Sdk 目錄的權(quán)限以及項(xiàng)目的 權(quán)限
// 777表示設(shè)置可讀可寫可執(zhí)行 *代表所以文件
sudo chmod -R 777 *
sudo chmod -R 777 flutter_app01
七、Xcode 打開 flutter 項(xiàng)目模擬器運(yùn)行項(xiàng)目
注意:打開項(xiàng)目之前一定要修改權(quán)限
運(yùn)行flutter run時(shí)藻糖，如若提醒未支持設(shè)備連接淹冰，要手動(dòng)連接手機(jī)，或者打開Xcode里的模擬器就解決了巨柒。
此時(shí)再輸入flutter doctor命令時(shí)樱拴，則會(huì)顯示你所連接設(shè)備成功[?] Connected device
如下圖所示：
八、在 Vscode 中配置 開發(fā) Flutter 項(xiàng)目
1洋满、Vscode 中安裝 Flutter 插件 和 Dart 插件晶乔。
2、Vscode 中打開 flutter 項(xiàng)目進(jìn)行開發(fā)
選擇文件File-->Open··選擇你的項(xiàng)目
3牺勾、運(yùn)行 Flutter 項(xiàng)目
flutter run
r 鍵:點(diǎn)擊后熱加載正罢，也就算是重新加載吧。
p 鍵:顯示網(wǎng)格驻民，這個(gè)可以很好的掌握布局情況腺怯，工作中很有用袱饭。 o 鍵:切換 android 和 ios 的預(yù)覽模式。
q 鍵:退出調(diào)試預(yù)覽模式呛占。
