2019年2月26號晚8點第一次做直播，給各位想學習Flutter技術的小夥伴分享了一場Flutter入門的技術。 直播中用到的資料我已經上傳到github上了，請點選這裡： github.com/kangshaojun…
直播回看地址: edu.csdn.net/course/deta…
Flutter100交流群: 894109159
開場白
Flutter簡介
酷炫屌炸天的介面
超高效能
渲染引擎Skia
Androis iOS Mac Win Linux 一致的UI
Android效果圖
iOS 效果圖
Mac效果圖
Win效果圖
移動端跨平臺開發技術演進
移動端從Hybird Cordova ---> ReactNative ---> Flutter 幾個方面詳細的分析了跨平臺開發所使用的技術，如下圖：
Flutter商用情況
Flutter動畫官方示例
Flutter系統架構
下面的圖片是Flutter框架結構圖，對大部分開發者而言，最常用的是Widgets層，也就是UI元件。其中有兩套風格的一個是Material，一個是Cupertino。然後是渲染層Rendering，然後是動畫，繪製，及手勢層。底層是Engine層使用C++語言編寫，保證其效能，其中Skia是它的圖形處理技術，Dart指Dart語言解析，Text指紋理渲染。
GPU渲染
下圖展示了Flutter的繪圖原理，Flutter框架直接使用Skia引擎來渲染，因此能夠控制渲染幀數，從而實現高幀速率
狀態控制
下圖展示了Flutter的狀態變化情況，從圖中可以看出，當狀態發生變化時會呼叫build方法使得介面重寫渲染，所以這裡大家需要改變一下思路，想控制介面的變化，可以在元件上編寫一個變數，當需要改變這個介面時，呼叫setState方法改為這個變數即可。
一切皆為Widget
Flutter一切皆為元件，包括佈局控制元件，手勢，動畫等內容。從下圖可以看到Widget主要分為兩大類，StatefulWidget有狀態的及StatelessWidget無狀態的元件。
佈局思路
如何佈局
下圖是Flutter官方的一個示例，首先把介面拆分成按垂直方向拆分成四大塊，垂直使用Column佈局，然後分別實現每一部分內容即可。 第一步： 使用圖片Image元件 第二步 使用水平佈局Row新增標題及圖示文字 第三步 使用水平佈局Row新增圖示及文字 第四步 使用文字區域元件新增簡介
細節拆分
下面兩部分均採用了水平及垂直巢狀佈局。首先從橫向上看採用水平佈局，均分成三塊。第一張圖左側標題部分採用了垂直佈局新增兩行標題。第二圖可以把圖示加文字抽象出一個方法來，採用垂直佈局，傳入圖示及文字內容即可。
Flutter外掛通訊原理
下圖是平臺通道的結構概述，使用MethodChannel在上層和底層之間傳遞訊息。MethodChannel就類似一個方法通道的功能，所以MethodChannel的name上下層一定要保持一致，上層呼叫底層的方法，底層處理好後返回給上層資料。注意這個過程是非同步的，所以一定要採用async/await關鍵字。
外掛免費課程
想學習的小夥伴請開啟如下地址： ke.qq.com/course/3916…
H5與Flutter對照
H5和Flutter可以找到很多的相同點，如下圖所示。大致可以這麼類比: Div ---> Container padding ---> Padding margin ---> Margin 同時Flutter採用CSS裡的Flex佈局，非常靈活。
實戰課程
想學習的小夥伴請開啟如下地址： ke.qq.com/course/3789…