Flutter是什么?
- Flutter is Google's UI toolkit building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase .
- Flutter is an app SDK for building high-performance, high-fidelity apps for iOS, Android, Web(beta), and Desktop(technical preview)from a single codebase
- Flutter是一個UI SDK(Software Development Kit)
- 可以進行移動端(iOS拉盾、Android)枯怖，Web端(Beta)筛峭，桌面(technical preview)憎茂，跨平臺解決方案;
Flutter的特點:
1.美觀:
- Google公司在國內(nèi)做過很多宣講略步，其中多次提到Flutter的幾個特點:美觀逗宁、快速柄慰、高效嫉拐、開放哩都。
- 使用Flutter內(nèi)置美麗的Material Design和Cupertino widget、豐富的motion API婉徘、平滑而自然的 滑動效果和平臺感知漠嵌，為您的用戶帶來全新體驗。
2.快速:
- Flutter 的 UI 渲染性能很好盖呼。在生產(chǎn)環(huán)境下儒鹿，F(xiàn)lutter 將代碼編譯成機器碼執(zhí)行，并充分利用 GPU 的圖形加速能力几晤，因此使用Flutter 開發(fā)的移動應(yīng)用即使在低配手機上也能實現(xiàn)每秒 60 幀的 UI 渲染速度约炎。
- Flutter 引擎使用 C++ 編寫，包括高效的 Skia 2D 渲染引擎蟹瘾，Dart 運行時和文本渲染庫圾浅。
- Flutter利用Skia繪圖引擎，直接通過CPU憾朴、GPU進行繪制贱傀，不需要依賴任何原生的控件
- Android操作系統(tǒng)中，我們編寫的原生控件實際上也是依賴于Skia進行繪制伊脓，所以flutter在某些Android操作系統(tǒng)上甚至還要高 于原生(因為原生Android中的Skia必須隨著操作系統(tǒng)進行更新府寒，而Flutter SDK中總是保持最新的)
3.高效:
- Hot Reload (熱重載) ，在前端已經(jīng)不是什么新鮮的東西报腔，但在移動端之前一直是沒有的
4.開放:
- Flutter是開放的,它是一個完全開源的項目
Flutter繪制原理圖:
Flutter繪制原理
渲染引擎skia:
1.Skia就是 Flutter向 GPU提供數(shù)據(jù)的途徑
- Skia(全稱Skia Graphics Library(SGL))是一個由C++編寫的開源圖形庫
- 能在低端設(shè)備如手機上呈現(xiàn)高質(zhì)量的2D圖形株搔，最初由Skia公司開發(fā)，后被 Google收購
- 應(yīng)用于Android纯蛾、Google Chrome纤房、Chrome OS等等當(dāng)中。
2.目前翻诉，Skia 已然是 Android 官方的圖像渲染引擎了炮姨，因此 Flutter Android
SDK 無需內(nèi)嵌 Skia 引擎就可以獲得天然的 Skia 支持;
3.擎被嵌入到 Flutter 的 iOS SDK 中捌刮，替代了 iOS 閉源的 Core Graphics/Core Animation/Core Text，這也正是 Flutter iOS SDK 打包的 App 包體積比 Android 要大一些的原因舒岸。
4.底層渲染能力統(tǒng)一了绅作，上層開發(fā)接口和功能體驗也就隨即統(tǒng)一了，開發(fā)者再也不 用操心平臺相關(guān)的渲染特性了蛾派。也就是說俄认，Skia 保證了同一套代碼調(diào)用在 Android 和 iOS 平臺上的渲染效果是完全一致的。
環(huán)境搭建:
1.操作系統(tǒng)選擇:
- Windows或者macOS(蘋果操作系統(tǒng))都是可以的
- 一般需要使用macOS洪乍，因為我們需要針對iOS進行調(diào)試眯杏，通常方便起見還是選擇macOS
2.安裝Flutter SDK:
- Flutter SDK下載地址:選擇自己的操作系統(tǒng)和最新穩(wěn)定的版本(Stable版本)
3.MacOS環(huán)境變量配置:
export FLUTTER_HOME=**/flutter
export PATH=$PATH:$FLUTTER_HOME/bin
export PATH=$PATH:$FLUTTER_HOME/bin/cache/dart-sdk/bin
4.Window環(huán)境變量配置:
- Windows環(huán)境變量修改:點擊計算機圖標 - 屬性 - 高級系統(tǒng)設(shè)置 - 高級 - 環(huán)境變量
- 找到Path，在其中添加Flutter SDK目錄下bin目錄以及Dart的目錄
5.配置鏡像
- flutter項目會依賴一些東西壳澳，在國內(nèi)下載這些依賴會有一些慢岂贩，所以我們可以將它們的安裝源換成國內(nèi)的(也就是設(shè)置國內(nèi)的鏡像)
- macOS或者Linux操作系統(tǒng)，依然是編輯~/.bash_profile文件
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL= https://storage.flutter-io.cn
- Windows用戶還是需要修改環(huán)境變量
1.Windows環(huán)境變量修改:點擊計算機圖標 - 屬性 - 高級系統(tǒng)設(shè)置 - 高級 - 環(huán)境變量
2.新建 變量 PUB_HOSTED_URL巷波，其值為https://pub.flutter-io.cn
3.新建 變量 FLUTTER_STORAGE_BASE_URL萎津，其值為https://storage.flutter-io.cn
6.配置iOS環(huán)境
*直接在App Store上搜索Xcode，找到安裝即可
*選擇自己的iOS模擬器
Snip20210824_2.png
6.配置Android環(huán)境
- Android Studio的下載
- 安裝JDK(java development kit java開發(fā)工具包) http://www.oracle.com/technetwork/java/javase/downloads/index.html
7.開發(fā)工具選擇
- VSCode
VSCode的優(yōu)點:
- VSCode其實并不能稱之為是一個IDE褥紫，它只是一個編輯器而已。
- 所以它非常的輕量級瞪慧，不會占用你非常大的內(nèi)存消耗髓考，而且啟動速度等都非常快弃酌，對于電腦配置不是特別高的同學(xué)氨菇，肯定是一個非常好的 選擇。
- 并且你可以在VSCode上安裝各種各樣的插件來滿足自己的開發(fā)需求妓湘。
VSCode的缺點:
- 很多Android Studio包括的方便操作沒有查蓉，比如點擊啟動、熱更新點擊等;
- 而且在某些情況下會出現(xiàn)一些問題;
- 比如有時候熱更新不及時常嘲裉看不到效果豌研，必須重啟;
- 比如某些情況下,沒有代碼提示不夠靈敏;
- Android Studio
Android Studio的優(yōu)點:
- 集成開發(fā)環(huán)境(IDE)不用多說，你需要的功能基本都有
- 而且上面說的VSCode存在的問題唬党，在Android Studio中基本不會出現(xiàn)
Android Studio的缺點:
- 一個字:重
- 無論是IDE本身鹃共，還是使用Android Studio啟動項目，都會相對慢一些
- 占據(jù)的計算機資源也很多驶拱，所以電腦配置較低是會出現(xiàn)卡頓
- 使用須知: 使用Android Studio開發(fā)Flutter我們需要安裝兩個插件:Flutter和Dart
8.創(chuàng)建Flutter項目
- 有兩種方式創(chuàng)建Flutter應(yīng)用:通過終端霜浴，通過編輯器。
- 通過終端(Windows和macOS都是一樣的命令)
flutter create ***- 將代碼運行到模擬器中:
flutter run –d 模擬器id (多個模擬器可以通過id選擇運行到哪一個模擬器上)
