以下內(nèi)容來自組內(nèi)分享杆麸，如有侵權(quán)修己，請聯(lián)系作者刪除给郊。
目錄：
- 什么是Flutter闰靴？
- Flutter環(huán)境配置
- 如何創(chuàng)建一個(gè)Flutter app?
- Flutter開發(fā)語言以及代碼結(jié)構(gòu)
- Flutter優(yōu)缺點(diǎn)
1.什么是Flutter彪笼？
背景：在全球，隨著Flutter被越來越多的知名公司應(yīng)用在自己的商業(yè)APP中蚂且，F(xiàn)lutter這門新技術(shù)也逐漸進(jìn)入了移動(dòng)開發(fā)者的視野配猫，尤其是當(dāng)Google在2018年IO大會(huì)上發(fā)布了第一個(gè)Preview版本后，國內(nèi)刮起來一股學(xué)習(xí)Flutter的熱潮杏死。目前使用flutter 開發(fā)的app有閑魚泵肄。
簡介：Flutter 是 Google推出并開源的移動(dòng)應(yīng)用開發(fā)框架捆交，主要是跨平臺、高保真腐巢、高性能品追。開發(fā)者可以通過 Dart語言開發(fā) App，一套代碼同時(shí)運(yùn)行在 iOS 和 Android平臺冯丙。 Flutter提供了豐富的組件肉瓦、接口，開發(fā)者可以很快地為 Flutter添加 native擴(kuò)展胃惜。同時(shí) Flutter還使用 Native引擎渲染視圖泞莉，為用戶提供良好的體驗(yàn)。
2.Flutter環(huán)境配置
- 操作系統(tǒng):MACOS
- 磁盤空間：700M(不包括IDE所占空間)
- 工具：bash mkdir rm git curl unzip which
鏡像使用： - 國內(nèi)訪問Flutter受限制船殉，F(xiàn)lutter官方為中國開發(fā)者搭建了臨時(shí)鏡像鲫趁。把鏡像添加到用戶環(huán)境變量中。（臨時(shí)鏡像）
- export PUB_HOSTED_URL=https://pub.flutter-io.cn
- export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
- 因?yàn)?a target="_blank">flutter-io.cn服務(wù)器是GDG China 維護(hù)的Flutter依賴項(xiàng)和臨時(shí)包的臨時(shí)鏡像利虫。Flutter團(tuán)隊(duì)無法保證這個(gè)服務(wù)的長期可用性挨厚。如果有興趣設(shè)置自己的影像可以聯(lián)系flutter開發(fā)團(tuán)隊(duì)(lutter-dev@googlegroups.com)。
社區(qū)運(yùn)行的鏡像站點(diǎn)：
- 上海交通大學(xué)Linux用戶組：FLUTTER_STORAGE_BASE_URL:https//mirrors.sjtug.sjtu.edu.cn
- PUB_HOSTED_URL: https://dart-pub.mirrors.sjtug.edu.cn
配置flutter環(huán)境（命令行）
$ export PUB_HOSTED_URL=https://pub.flutter-io.cn
$ export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
$ git clone -b dev https://github.com/flutter/flutter.git
$ export PATH="$PWD/flutter/bin:$PATH"
$ cd ./flutter
$ flutter doctor
flutter doctor 作用：檢查是否需要安裝其他依賴來完成安裝
環(huán)境配置注意項(xiàng)
使用zsh客戶端的時(shí)候終端啟動(dòng)時(shí)/.bash_profile將不會(huì)被加載糠惫，解決辦法就是修改./zshrc疫剃，在其中添加：source ~/.bash_profile
iOS設(shè)置
- 安裝xcode
- 設(shè)置iOS模擬器 open -a Simulator
- 啟動(dòng)應(yīng)用程序flutter run命令(工程目錄下)
配置編輯器
- 使用的是VS Code（版本1.20.1及以上版本）
- 安裝flutter插件
- 通過flutter doctor 驗(yàn)證設(shè)置
PS:如何安裝flutter 插件
- 啟動(dòng)VS Code
- 調(diào)用view->command palette
- 輸入install 選擇Extentions:Install Extention action
- 搜索flutter 選擇后 點(diǎn)擊install
- install完成之后點(diǎn)擊OK重新啟動(dòng)VS Code
3.如何創(chuàng)建一個(gè)Flutter app?
VSCode->view->command palette->Flutter new project->輸入項(xiàng)目名稱(小寫字母可以使用下劃線)->等待項(xiàng)目創(chuàng)建完成
工程結(jié)構(gòu)
- .idea IntelliJ IDEA
- .vscode vscode 附屬相關(guān)
- .android 安卓工程
- .build 編譯產(chǎn)物
- .ios iOS代碼
- lib 寫代碼的地方
- test
- .packages
- pubspec.lock 編寫文件配設(shè)的版本
- pubspec.yaml 編寫文件配置的語言
-
README.md
工程結(jié)構(gòu)
4.學(xué)習(xí)flutter需要了解什么？寞钥？
什么是widget?
Flutter Widget采用現(xiàn)代響應(yīng)式框架構(gòu)建慌申，這是從 React 中獲得的靈感陌选，中心思想是用widget構(gòu)建你的UI理郑。 Widget描述了他們的視圖在給定其當(dāng)前配置和狀態(tài)時(shí)應(yīng)該看起來像什么。當(dāng)widget的狀態(tài)發(fā)生變化時(shí)咨油，widget會(huì)重新構(gòu)建UI您炉，F(xiàn)lutter會(huì)對比前后變化的不同， 以確定底層渲染樹從一個(gè)狀態(tài)轉(zhuǎn)換到下一個(gè)狀態(tài)所需的最小更改
什么是dart役电？
Dart 是一個(gè)靜態(tài)語言赚爵，這也是相對于js的一個(gè)優(yōu)勢。Dart可以被編譯成js法瑟，雖然看起來像java冀膝。靜態(tài)語言可以避免錯(cuò)誤，獲得更多的編輯器提示詞霎挟。極大的增加了可維護(hù)性窝剖。
pub依賴之yaml文件
Flutter工程之間的依賴管理是通過Pub來管理的，依賴的產(chǎn)物是直接源碼依賴酥夭，這種依賴方式和iOS中的Pod有點(diǎn)像赐纱，都可以進(jìn)行依賴庫版本號的區(qū)間限定與Git遠(yuǎn)程依賴等脊奋，其中具體聲明依賴是在pubspec.yaml文件中，其中的依賴編寫是基于YAML語法疙描，YAML是一個(gè)專門用來編寫文件配置的語言诚隙，聲明依賴后，通過運(yùn)行flutter packages get命名起胰，會(huì)從遠(yuǎn)程或本地拉取對應(yīng)的依賴久又，同時(shí)會(huì)生成pubspec.lock文件，這個(gè)文件和IOS中的Podfile.lock極其相似效五，會(huì)在本地鎖定當(dāng)前依賴的庫以及對應(yīng)版本號籽孙，只有當(dāng)執(zhí)行flutter packages upgrade時(shí)，這時(shí)才會(huì)更新火俄。
5.Flutter 優(yōu)缺點(diǎn)
Flutter優(yōu)點(diǎn)
-
性能強(qiáng)大犯建，流暢
- Flutter 和weex以及rn相比，性能好很多瓜客。谷歌直接在兩個(gè)平臺上重寫了各自的UIKit适瓦。對接到平臺的底層，減少了UI層的多層轉(zhuǎn)換谱仪。UI性能可以和原生媲美玻熙。
優(yōu)秀的動(dòng)畫設(shè)計(jì)
Flutter動(dòng)畫比較簡單，只需要將一個(gè)組件的屬性通過補(bǔ)間(Tween)關(guān)聯(lián)到動(dòng)畫對象上疯攒，F(xiàn)lutter會(huì)確保每一幀渲染正確的組件上嗦随，形成連貫的動(dòng)畫。
UI跨平臺穩(wěn)定
google直接在兩個(gè)平臺底層上重寫了UIKit 不依賴于css等外部解釋器敬尺。
Flutter缺點(diǎn)
假裝跨平臺枚尼，避不開原生代碼組合而不是繼承的思路
這個(gè)框架其實(shí)就是UI跨平臺，具有與原生代碼交互的能力砂吞，硬性要求啊 前端同學(xué)別輕易入坑署恍。。(前端同學(xué)那里知道UIViewcontroller和Activity蜻直。盯质。成本略高)再說了交互問題 不明白原生的怎么玩的轉(zhuǎn)交互
采用組合的方式而不是繼承
Flutter提倡組合，而不是繼承概而。原生開發(fā)中我們可能會(huì)繼承自UIView在這個(gè)基礎(chǔ)上進(jìn)行自定義呼巷。而flutter中的屬性都是final的。你繼承一個(gè)Container赎瑰，不能在它的生命周期來修改屬性王悍。所以需要組合嵌套多種widget比如說：row container listview等widget。
Wall
這點(diǎn)不用多說了乡范。
總結(jié):
Flutter開發(fā)主要在于要了解原生的環(huán)境配名。(好像跨平臺的框架都是這樣)啤咽，想要通過跨平臺的api拿下兩端開發(fā)是不太現(xiàn)實(shí)的。(平臺本身存在差異性)有點(diǎn)也很明顯渠脉，動(dòng)畫比較流暢宇整。
參考鏈接:
https://flutterchina.club/setup-macos/
https://segmentfault.com/a/1190000017164263
安裝時(shí)候遇到的問題：
- 執(zhí)行flutter doctor 命令的時(shí)候，報(bào)錯(cuò)： -bash: Flutter: command not found
這個(gè)問題是路徑的問題：
解決方案：
在_bash_profile中設(shè)置路徑
# 這里設(shè)置的是克隆flutter源代碼的地址
export PATH=/Users/userName/flutter/bin:$PATH
如果使用的是zsh客戶端：
使用zsh客戶端的時(shí)候終端啟動(dòng)時(shí)/.bash_profile將不會(huì)被加載芋膘，解決辦法就是修改./zshrc鳞青，在其中添加：source ~/.bash_profile
