(一)學(xué)習(xí)大綱

Flutter的學(xué)習(xí)之路

(二)Flutter是什么？

Flutter是一個(gè)UI SDK（Software Development Kit），可以對(duì)移動(dòng)端、Web端、桌面的開(kāi)發(fā)，完美的跨平臺(tái)解決方案。具有一統(tǒng)大前端的野心，正在侵蝕iOS、Android等原生開(kāi)發(fā)。

(二)Flutter的優(yōu)勢(shì)在哪里？

1、美觀
Flutter內(nèi)置的Material Design 和Cupertino widget、豐富的motion API、平滑自然的滑動(dòng)效果和用戶(hù)體驗(yàn)
2、快速
Flutter的渲染性能很好。Flutter將代碼編譯成機(jī)器碼執(zhí)行，充分利用GPU的圖形加速能力。即使低性能手機(jī)也能實(shí)現(xiàn)60FPS的渲染速度
Flutter引擎使用C++編寫(xiě)，高效的Skia 2D渲染引擎，Dart 運(yùn)行時(shí)和文本渲染庫(kù)
3、高效
Hot Reload（熱重載）
4、開(kāi)放
Flutter是開(kāi)源項(xiàng)目

(三)Flutter繪制原理

• GPU將信號(hào)同步到UI線(xiàn)程
• UI線(xiàn)程用Dart來(lái)構(gòu)建圖層樹(shù)
• 圖層樹(shù)在GPU線(xiàn)程進(jìn)行合成
• 將合成后的視圖數(shù)據(jù)提供給Skia引擎，Skia引擎通過(guò)OPenGL(或Vulkan)將顯示內(nèi)容提供給GPU

Flutter繪制原理

(四)什么是Skia渲染引擎

Skia是一個(gè)Flutter向GPU提供數(shù)據(jù)的途徑
Skia（Skia Graphics Library）是一個(gè)由C++編寫(xiě)的開(kāi)源圖形庫(kù)
對(duì)于iOS平臺(tái)，Skia是跨平臺(tái)的，替代了iOS的Core Graphics/ Core Animation/ Core Text ,所以iOS包會(huì)比Android要大很多（Skia作為Flutter iOS渲染引擎嵌入到Flutter的iOS SDK）。

(五)大前端學(xué)不動(dòng)系列

每一樣新技術(shù)的出現(xiàn)都是為了解決之前技術(shù)的某些痛點(diǎn)的，要學(xué)會(huì)擁抱這種變化

如何學(xué)習(xí)Flutter？

• Dart語(yǔ)言學(xué)習(xí)
• Flutter實(shí)戰(zhàn)學(xué)習(xí)
• Flutter底層技術(shù)、 源碼閱讀

以上都是對(duì)Flutter相關(guān)知識(shí)的理解，下面是對(duì)Flutter環(huán)境的搭建：

(六)Flutter環(huán)境搭建

前往Flutter中文文檔有相應(yīng)的流程

• 下載Flutter SDK 、解壓將flutter文件夾移動(dòng)到自己想安裝的路徑
• 配置環(huán)境變量 vim ~/.bash_profile
  下面的三條地址分別是：配置flutter全局路徑(~/Documents為flutter當(dāng)前存放地址)、配置pub鏡像地址、配置flutter鏡像地址

export PATH=~/Documents/flutter/bin:$PATH
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

• 保存完畢后 調(diào)用source ~/.bash_profile 使之生效
• 檢查環(huán)境 配置好后調(diào)用flutter doctor 檢查當(dāng)前電腦環(huán)境是否有缺失的配置

• 如果出現(xiàn)下面的圖 就說(shuō)明已經(jīng)配置完畢！

  
  
  image.png

(七)Flutter開(kāi)發(fā)工具的選擇

官方推薦：VSCode 和 Android studio

day 01 Flutter初識(shí)