一.Flutter簡(jiǎn)介和環(huán)境搭建

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是一個(gè)UI SDK(Software Development Kit)
  • 可以進(jìn)行移動(dòng)端(iOS、Android)，Web端(Beta)，桌面(technical preview)，跨平臺(tái)解決方案;

Flutter的特點(diǎn):

1.美觀:
  • Google公司在國(guó)內(nèi)做過(guò)很多宣講，其中多次提到Flutter的幾個(gè)特點(diǎn):美觀、快速、高效、開(kāi)放。
  • 使用Flutter內(nèi)置美麗的Material Design和Cupertino widget、豐富的motion API、平滑而自然的 滑動(dòng)效果和平臺(tái)感知，為您的用戶帶來(lái)全新體驗(yàn)。
2.快速:
  • Flutter 的 UI 渲染性能很好。在生產(chǎn)環(huán)境下，F(xiàn)lutter 將代碼編譯成機(jī)器碼執(zhí)行，并充分利用 GPU 的圖形加速能力，因此使用Flutter 開(kāi)發(fā)的移動(dòng)應(yīng)用即使在低配手機(jī)上也能實(shí)現(xiàn)每秒 60 幀的 UI 渲染速度。
  • Flutter 引擎使用 C++ 編寫(xiě)，包括高效的 Skia 2D 渲染引擎，Dart 運(yùn)行時(shí)和文本渲染庫(kù)。
  • Flutter利用Skia繪圖引擎，直接通過(guò)CPU、GPU進(jìn)行繪制，不需要依賴任何原生的控件
  • Android操作系統(tǒng)中，我們編寫(xiě)的原生控件實(shí)際上也是依賴于Skia進(jìn)行繪制，所以flutter在某些Android操作系統(tǒng)上甚至還要高 于原生(因?yàn)樵鶤ndroid中的Skia必須隨著操作系統(tǒng)進(jìn)行更新，而Flutter SDK中總是保持最新的)
3.高效:
  • Hot Reload (熱重載) ，在前端已經(jīng)不是什么新鮮的東西，但在移動(dòng)端之前一直是沒(méi)有的
4.開(kāi)放:
  • Flutter是開(kāi)放的,它是一個(gè)完全開(kāi)源的項(xiàng)目

Flutter繪制原理圖:

Flutter繪制原理

渲染引擎skia:

1.Skia就是 Flutter向 GPU提供數(shù)據(jù)的途徑
  • Skia(全稱Skia Graphics Library(SGL))是一個(gè)由C++編寫(xiě)的開(kāi)源圖形庫(kù)
  • 能在低端設(shè)備如手機(jī)上呈現(xiàn)高質(zhì)量的2D圖形，最初由Skia公司開(kāi)發(fā)，后被 Google收購(gòu)
  • 應(yīng)用于Android、Google Chrome、Chrome OS等等當(dāng)中。
2.目前，Skia 已然是 Android 官方的圖像渲染引擎了，因此 Flutter Android

SDK 無(wú)需內(nèi)嵌 Skia 引擎就可以獲得天然的 Skia 支持;

3.擎被嵌入到 Flutter 的 iOS SDK 中，替代了 iOS 閉源的 Core Graphics/Core Animation/Core Text，這也正是 Flutter iOS SDK 打包的 App 包體積比 Android 要大一些的原因。
4.底層渲染能力統(tǒng)一了，上層開(kāi)發(fā)接口和功能體驗(yàn)也就隨即統(tǒng)一了，開(kāi)發(fā)者再也不 用操心平臺(tái)相關(guān)的渲染特性了。也就是說(shuō)，Skia 保證了同一套代碼調(diào)用在 Android 和 iOS 平臺(tái)上的渲染效果是完全一致的。

環(huán)境搭建:

1.操作系統(tǒng)選擇:
  • Windows或者macOS(蘋果操作系統(tǒng))都是可以的
  • 一般需要使用macOS，因?yàn)槲覀冃枰槍?duì)iOS進(jìn)行調(diào)試，通常方便起見(jiàn)還是選擇macOS
2.安裝Flutter SDK:
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)境變量修改:點(diǎn)擊計(jì)算機(jī)圖標(biāo) - 屬性 - 高級(jí)系統(tǒng)設(shè)置 - 高級(jí) - 環(huán)境變量
  • 找到Path，在其中添加Flutter SDK目錄下bin目錄以及Dart的目錄
5.配置鏡像
  • flutter項(xiàng)目會(huì)依賴一些東西，在國(guó)內(nèi)下載這些依賴會(huì)有一些慢，所以我們可以將它們的安裝源換成國(guó)內(nèi)的(也就是設(shè)置國(guó)內(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)境變量修改:點(diǎn)擊計(jì)算機(jī)圖標(biāo) - 屬性 - 高級(jí)系統(tǒng)設(shè)置 - 高級(jí) - 環(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)境
7.開(kāi)發(fā)工具選擇
  • VSCode

VSCode的優(yōu)點(diǎn):

  1. VSCode其實(shí)并不能稱之為是一個(gè)IDE，它只是一個(gè)編輯器而已。
  2. 所以它非常的輕量級(jí)，不會(huì)占用你非常大的內(nèi)存消耗，而且啟動(dòng)速度等都非?？?，對(duì)于電腦配置不是特別高的同學(xué)，肯定是一個(gè)非常好的 選擇。
  3. 并且你可以在VSCode上安裝各種各樣的插件來(lái)滿足自己的開(kāi)發(fā)需求。

VSCode的缺點(diǎn):

  1. 很多Android Studio包括的方便操作沒(méi)有，比如點(diǎn)擊啟動(dòng)、熱更新點(diǎn)擊等;
  2. 而且在某些情況下會(huì)出現(xiàn)一些問(wèn)題;
  3. 比如有時(shí)候熱更新不及時(shí)常?？床坏叫Ч?，必須重啟;
  4. 比如某些情況下,沒(méi)有代碼提示不夠靈敏;
  • Android Studio

Android Studio的優(yōu)點(diǎn):

  1. 集成開(kāi)發(fā)環(huán)境(IDE)不用多說(shuō)，你需要的功能基本都有
  2. 而且上面說(shuō)的VSCode存在的問(wèn)題，在Android Studio中基本不會(huì)出現(xiàn)

Android Studio的缺點(diǎn):

  1. 一個(gè)字:重
  2. 無(wú)論是IDE本身，還是使用Android Studio啟動(dòng)項(xiàng)目，都會(huì)相對(duì)慢一些
  3. 占據(jù)的計(jì)算機(jī)資源也很多，所以電腦配置較低是會(huì)出現(xiàn)卡頓
  4. 使用須知: 使用Android Studio開(kāi)發(fā)Flutter我們需要安裝兩個(gè)插件:Flutter和Dart
8.創(chuàng)建Flutter項(xiàng)目
  • 有兩種方式創(chuàng)建Flutter應(yīng)用:通過(guò)終端，通過(guò)編輯器。
  1. 通過(guò)終端(Windows和macOS都是一樣的命令)
    flutter create ***
  2. 將代碼運(yùn)行到模擬器中:
    flutter run –d 模擬器id (多個(gè)模擬器可以通過(guò)id選擇運(yùn)行到哪一個(gè)模擬器上)
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容