一.Flutter簡介和環境搭建

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:
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環境
7.開發工具選擇
  • VSCode

VSCode的優點:

  1. VSCode其實并不能稱之為是一個IDE,它只是一個編輯器而已。
  2. 所以它非常的輕量級,不會占用你非常大的內存消耗,而且啟動速度等都非常快,對于電腦配置不是特別高的同學,肯定是一個非常好的 選擇。
  3. 并且你可以在VSCode上安裝各種各樣的插件來滿足自己的開發需求。

VSCode的缺點:

  1. 很多Android Studio包括的方便操作沒有,比如點擊啟動、熱更新點擊等;
  2. 而且在某些情況下會出現一些問題;
  3. 比如有時候熱更新不及時常常看不到效果,必須重啟;
  4. 比如某些情況下,沒有代碼提示不夠靈敏;
  • Android Studio

Android Studio的優點:

  1. 集成開發環境(IDE)不用多說,你需要的功能基本都有
  2. 而且上面說的VSCode存在的問題,在Android Studio中基本不會出現

Android Studio的缺點:

  1. 一個字:重
  2. 無論是IDE本身,還是使用Android Studio啟動項目,都會相對慢一些
  3. 占據的計算機資源也很多,所以電腦配置較低是會出現卡頓
  4. 使用須知: 使用Android Studio開發Flutter我們需要安裝兩個插件:Flutter和Dart
8.創建Flutter項目
  • 有兩種方式創建Flutter應用:通過終端,通過編輯器。
  1. 通過終端(Windows和macOS都是一樣的命令)
    flutter create ***
  2. 將代碼運行到模擬器中:
    flutter run –d 模擬器id (多個模擬器可以通過id選擇運行到哪一個模擬器上)
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,119評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,382評論 3 415
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,038評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,853評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,616評論 6 408
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,112評論 1 323
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,192評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,355評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,869評論 1 334
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,727評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,928評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,467評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,165評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,570評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,813評論 1 282
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,585評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,892評論 2 372

推薦閱讀更多精彩內容