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公司在國內做過很多宣講,其中多次提到Flutter的幾個特點:美觀、快速、高效、開放。
- 使用Flutter內置美麗的Material Design和Cupertino widget、豐富的motion API、平滑而自然的 滑動效果和平臺感知,為您的用戶帶來全新體驗。
2.快速:
- Flutter 的 UI 渲染性能很好。在生產環境下,Flutter 將代碼編譯成機器碼執行,并充分利用 GPU 的圖形加速能力,因此使用Flutter 開發的移動應用即使在低配手機上也能實現每秒 60 幀的 UI 渲染速度。
- Flutter 引擎使用 C++ 編寫,包括高效的 Skia 2D 渲染引擎,Dart 運行時和文本渲染庫。
- Flutter利用Skia繪圖引擎,直接通過CPU、GPU進行繪制,不需要依賴任何原生的控件
- Android操作系統中,我們編寫的原生控件實際上也是依賴于Skia進行繪制,所以flutter在某些Android操作系統上甚至還要高 于原生(因為原生Android中的Skia必須隨著操作系統進行更新,而Flutter SDK中總是保持最新的)
3.高效:
- Hot Reload (熱重載) ,在前端已經不是什么新鮮的東西,但在移動端之前一直是沒有的
4.開放:
- Flutter是開放的,它是一個完全開源的項目
Flutter繪制原理圖:
Flutter繪制原理
渲染引擎skia:
1.Skia就是 Flutter向 GPU提供數據的途徑
- Skia(全稱Skia Graphics Library(SGL))是一個由C++編寫的開源圖形庫
- 能在低端設備如手機上呈現高質量的2D圖形,最初由Skia公司開發,后被 Google收購
- 應用于Android、Google Chrome、Chrome OS等等當中。
2.目前,Skia 已然是 Android 官方的圖像渲染引擎了,因此 Flutter Android
SDK 無需內嵌 Skia 引擎就可以獲得天然的 Skia 支持;
3.擎被嵌入到 Flutter 的 iOS SDK 中,替代了 iOS 閉源的 Core Graphics/Core Animation/Core Text,這也正是 Flutter iOS SDK 打包的 App 包體積比 Android 要大一些的原因。
4.底層渲染能力統一了,上層開發接口和功能體驗也就隨即統一了,開發者再也不 用操心平臺相關的渲染特性了。也就是說,Skia 保證了同一套代碼調用在 Android 和 iOS 平臺上的渲染效果是完全一致的。
環境搭建:
1.操作系統選擇:
- Windows或者macOS(蘋果操作系統)都是可以的
- 一般需要使用macOS,因為我們需要針對iOS進行調試,通常方便起見還是選擇macOS
2.安裝Flutter SDK:
- Flutter SDK下載地址:選擇自己的操作系統和最新穩定的版本(Stable版本)
3.MacOS環境變量配置:
export FLUTTER_HOME=**/flutter
export PATH=$PATH:$FLUTTER_HOME/bin
export PATH=$PATH:$FLUTTER_HOME/bin/cache/dart-sdk/bin
4.Window環境變量配置:
- Windows環境變量修改:點擊計算機圖標 - 屬性 - 高級系統設置 - 高級 - 環境變量
- 找到Path,在其中添加Flutter SDK目錄下bin目錄以及Dart的目錄
5.配置鏡像
- flutter項目會依賴一些東西,在國內下載這些依賴會有一些慢,所以我們可以將它們的安裝源換成國內的(也就是設置國內的鏡像)
- macOS或者Linux操作系統,依然是編輯~/.bash_profile文件
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL= https://storage.flutter-io.cn
- Windows用戶還是需要修改環境變量
1.Windows環境變量修改:點擊計算機圖標 - 屬性 - 高級系統設置 - 高級 - 環境變量
2.新建 變量 PUB_HOSTED_URL,其值為https://pub.flutter-io.cn
3.新建 變量 FLUTTER_STORAGE_BASE_URL,其值為https://storage.flutter-io.cn
6.配置iOS環境
*直接在App Store上搜索Xcode,找到安裝即可
*選擇自己的iOS模擬器
Snip20210824_2.png
6.配置Android環境
- Android Studio的下載
- 安裝JDK(java development kit java開發工具包) http://www.oracle.com/technetwork/java/javase/downloads/index.html
7.開發工具選擇
- VSCode
VSCode的優點:
- VSCode其實并不能稱之為是一個IDE,它只是一個編輯器而已。
- 所以它非常的輕量級,不會占用你非常大的內存消耗,而且啟動速度等都非常快,對于電腦配置不是特別高的同學,肯定是一個非常好的 選擇。
- 并且你可以在VSCode上安裝各種各樣的插件來滿足自己的開發需求。
VSCode的缺點:
- 很多Android Studio包括的方便操作沒有,比如點擊啟動、熱更新點擊等;
- 而且在某些情況下會出現一些問題;
- 比如有時候熱更新不及時常常看不到效果,必須重啟;
- 比如某些情況下,沒有代碼提示不夠靈敏;
- Android Studio
Android Studio的優點:
- 集成開發環境(IDE)不用多說,你需要的功能基本都有
- 而且上面說的VSCode存在的問題,在Android Studio中基本不會出現
Android Studio的缺點:
- 一個字:重
- 無論是IDE本身,還是使用Android Studio啟動項目,都會相對慢一些
- 占據的計算機資源也很多,所以電腦配置較低是會出現卡頓
- 使用須知: 使用Android Studio開發Flutter我們需要安裝兩個插件:Flutter和Dart
8.創建Flutter項目
- 有兩種方式創建Flutter應用:通過終端,通過編輯器。
- 通過終端(Windows和macOS都是一樣的命令)
flutter create ***- 將代碼運行到模擬器中:
flutter run –d 模擬器id (多個模擬器可以通過id選擇運行到哪一個模擬器上)