前言

近期有不少網(wǎng)友咨詢 Flutter 學習相關(guān)的問題，F(xiàn)lutter 作為一門新的技術(shù)秕铛，確實相關(guān)的資料書籍不太多。但就 Flutter 生態(tài)的影響力而言，已經(jīng)是越來越強了俄占。譬如，在 StackOverflow 網(wǎng)站上2021年度最受歡迎的技術(shù)中淆衷，Dart 語言排在了第7位缸榄。隨著谷歌對 Flutter 跨平臺解決方案的推進，估計會有越來越多的開發(fā)者使用 Flutter 構(gòu)建他們的應用祝拯。

Dart越來越受歡迎

本篇甚带，就學習 Flutter 來一次完整的梳理，也歡迎大家在評論區(qū)進行補充和交流佳头。

學習線路思維導圖

先上一份思維導圖鹰贵，讓大家有個整體認識。

Flutter學習路線圖

Dart 語言

在學習 Dart 語言前康嘉，若沒有任何編程基礎(chǔ)碉输，建議先了解一下計算機基礎(chǔ)知識。Dart 作為一門現(xiàn)代化的面向?qū)ο缶幊陶Z言亭珍，具備了市面上大多數(shù)編程語言的特點敷钾，具體來說會分為下面這些內(nèi)容：

• 變量定義枝哄、賦值：這是最基礎(chǔ)的部分，至少要知道什么是變量阻荒，如何賦值挠锥。final，var 和 const 的區(qū)別侨赡。
• 基本數(shù)學運算：加蓖租、減、乘羊壹、除蓖宦、整除、取余等運算舶掖；
• 條件分支：if...else if...else 控制程序邏輯走向球昨，或是 switch 分支；
• 循環(huán)：使用循環(huán)完成重復性的工作眨攘；
• 容器類：如List主慰、Map 和 Set 的應用；
• 函數(shù)和參數(shù)：一個是使用函數(shù)編寫可復用的邏輯處理代碼鲫售，二是需要注意在 Dart 中函數(shù)也是對象共螺。同時需要區(qū)分函數(shù)的命名參數(shù)、可選參數(shù)的使用情竹；
• 面向?qū)ο缶幊蹋毫私饷嫦驅(qū)ο缶幊痰母拍詈退枷朊瓴唬軌蚝侠淼厥褂妙悂矸庋b代碼提高復用性和降低耦合；
• 繼承秦效、多態(tài)和抽象類：這是提高代碼復用雏蛮、降低代碼耦合度十分重要的概念，建議是多看看一些源碼和設(shè)計思想（如設(shè)計模式）阱州，然后在遇到復雜業(yè)務(wù)的時候先思考如何抽象和組織代碼結(jié)構(gòu)挑秉。
• mixin：mixin 提供了一種更為靈活的代碼復用方式，可以將功能組合到現(xiàn)有類中苔货，從而避免了繼承的一些缺點犀概。
• 泛型：使用泛型來做工具類是再好不過的選擇了，通過泛型可以一套代碼處理多種數(shù)據(jù)類型夜惭。
• Future：有點類似前端的 promise姻灶，通過 Future 可以讓異步編程變得更加簡單。
• null safety：空安全現(xiàn)在基本上是高級語言的標配了诈茧。通過空安全可以讓團隊遵循同一個規(guī)范产喉，提高了代碼的健壯性。

Flutter 組件

作為一個合格的App 開發(fā)，能夠?qū)⒁粋€UI 界面還原出來是基本的要求曾沈。建議一開始需要熟悉Flutter框架提供的自帶組件尘颓，然后可以通過自帶的組件組合成為自己的自定義組件。這部分內(nèi)容包括：

• 運行 Hello World 程序晦譬，跑通整個應用。
• 了解應用程序的結(jié)構(gòu)互广，知道如何設(shè)計你的代碼目錄結(jié)構(gòu)敛腌。
• 布局類組件：如 Container，SizedBox惫皱，Padding像樊，Stack，ListView旅敷，GridView 等組件生棍。
• 業(yè)務(wù)類組件：如 TextField，按鈕媳谁，文本涂滴，圖片，圖標等組件晴音。
• 自定義組件：利用布局類組件和業(yè)務(wù)類組件組合柔纵，構(gòu)成自己的可復用的組件。
• 自有組件庫：根據(jù)產(chǎn)品特性和公司需要锤躁，抽取復用的組件構(gòu)成自有的組件庫搁料，從而提升整個公司的開發(fā)效率。

表單

應用中系羞，表單在界面中出現(xiàn)的頻率很高郭计。如何處理表單對開發(fā)效率的影響很大。建議可以一開始從簡單的表單頁面開始椒振，例如登錄頁昭伸、注冊頁。然后再做一些復雜的表單頁面杠人，具體如下：

• 簡單表單頁面的實現(xiàn)：登錄頁勋乾、注冊頁、綁定手機號這類的頁面嗡善；
• 不同表單的實現(xiàn)：例如普通文本辑莫、密碼、數(shù)字罩引、日期各吨、單選、多選等表單的實現(xiàn)；
• 表單校驗：封裝表單校驗庫揭蜒，將通用的校驗規(guī)則放置在校驗庫中横浑，比如長度、手機號校驗屉更、密碼強度校驗徙融、日期格式校驗等等。通過前端的提前校驗可以避免后端請求壓力瑰谜，也能夠提升用戶體驗欺冀。
• 表單封裝：封裝一套通用的表單組件，供整個團隊復用萨脑，提高生產(chǎn)效率隐轩，也能減少 bug 的產(chǎn)生。

狀態(tài)管理

狀態(tài)管理是 Flutter 的核心渤早，如何處理數(shù)據(jù)實體职车、業(yè)務(wù)邏輯、界面之間的關(guān)系對代碼的可維護性十分關(guān)鍵鹊杖，而這都依賴于狀態(tài)管理的實現(xiàn)悴灵。對于狀態(tài)管理，建議按如下方式學習：

• 有狀態(tài)組件和無狀態(tài)組件的區(qū)別骂蓖，可以閱讀一下StatefulWidget 和 StatelessWidget 的源碼称勋，會有更深刻的理解。
• 理解組件的渲染機制：雖然我們開發(fā)中很少關(guān)注組件如何渲染涯竟，但是當應用狀態(tài)管理插件時赡鲜，我們通過渲染機制能夠知道狀態(tài)數(shù)據(jù)更新時如何減少刷新的范圍，實現(xiàn)局部刷新庐船，從而提升性能银酬。
• 主流狀態(tài)插件應用：對比主流狀態(tài)插件，從中選擇一個合適自己團隊的應用筐钟。對于長期用的狀態(tài)管理插件揩瞪，建議深入了解具體的實現(xiàn)機制，以便再遇到問題時能夠快速定位篓冲，快速解決李破。
• 按需刷新：相比 setState 這種簡單粗暴的全局更新，狀態(tài)管理插件的一大優(yōu)勢就是可以實現(xiàn)局部刷新壹将。通過按需刷新可以極大地提高頁面的流暢度嗤攻。

關(guān)于狀態(tài)管理的插件，可以通過閱讀下面這篇文章來進行了解诽俯。也可以閱讀我的系列專欄妇菱，有介紹常用的狀態(tài)管理插件使用和原理。

• ??????建議收藏！闯团！Flutter狀態(tài)管理插件哪家強辛臊？請看島上碼農(nóng)的排行榜！

網(wǎng)絡(luò)請求

App 的業(yè)務(wù)功能開發(fā)房交，相當一部分工作是在與和后端對接口彻舰、聯(lián)調(diào)接口。了解與后端的數(shù)據(jù)交互候味，封裝好網(wǎng)絡(luò)請求庫非常重要淹遵。這里建議按如下的方式進行學習：

• JSON 數(shù)據(jù)的認識：這個其實很簡單，基本上一看就明白负溪。但更重要的是和后端約定返回數(shù)據(jù)的格式，避免每個接口的格式都不同济炎，那樣很難做統(tǒng)一封裝川抡。
• JSON 數(shù)據(jù)轉(zhuǎn)對象：曾幾何時，我是直接拿 JSON 對象（實際已經(jīng)轉(zhuǎn)成 Map 了）的 key 去取所需的值的须尚。結(jié)果遭受了慘痛的教訓崖堤，比如后端問題變成 null 了會導致閃退。而且每次都需要敲 key的名稱耐床，編碼效率極低密幔。而將 JSON 數(shù)據(jù)轉(zhuǎn)為對象，一方面是對象可以在整個工程里復用撩轰，二是可以通過對象屬性訪問胯甩，編碼有提示。同時堪嫂，可以應用 null safety 屬性直接知道哪個屬性是否可能為空偎箫。
• RESTful接口調(diào)試：早期的接口都是 GET 和 POST 請求，但是其實語義上并不明確皆串。建議是統(tǒng)一和后端約定使用 RESTful 風格接口淹办。
• Mock 數(shù)據(jù)：后端接口沒出來之前，使用 Mock 數(shù)據(jù)來完成業(yè)務(wù)邏輯的模擬非常重要恶复。建議 Mock 的數(shù)據(jù)獲取接口和后端的接口保持一致（統(tǒng)一實現(xiàn)相同的接口）怜森，這樣在后端接口就緒后可以直接切換接口實現(xiàn)類就可以了。
• 網(wǎng)絡(luò)請求插件使用與封裝：Flutter 目前最為流行的網(wǎng)絡(luò)請求插件是 Dio谤牡，對應的封裝版本有 Retrofit副硅。建議不要上來一開始就有用封裝好的版本。而是自己一個個調(diào)試翅萤，然后嘗試自己封裝想许，這樣會更好地理解封裝的過程。
• Headers 和 Cookie：App 和瀏覽器不同，瀏覽器會自己管理 Cookie流纹。而 App 需要自己管理 Cookie糜烹。因此有必要了解如何設(shè)置請求頭 Headers，以及如何獲取后端的 Cookie 并回寫到 Headers 里面漱凝。

響應式編程

當你對界面疮蹦、狀態(tài)管理、網(wǎng)絡(luò)請求都掌握差不多到時候茸炒，使用 Flutter 開發(fā)基本的 App 就基本沒問題了愕乎。這個時候需要考慮應用結(jié)構(gòu)如何優(yōu)化。對于 Dart 而言壁公，提供了 Stream 和 StreamListener 這樣的工具來通過流的方式驅(qū)動關(guān)聯(lián)業(yè)務(wù)或界面更新感论，實現(xiàn)響應式編程。這里面典型的是 BLoC 模式 （BLoC 也可以用于狀態(tài)管理）紊册。了解一下 BLoC 的理念對設(shè)計整個應用程序框架十分有幫助比肄。

動畫

當你掌握上述的基本技能后，你看到別人 App 的酷炫動效時肯定心癢癢囊陡，想自己偶爾也能玩一下這類高大上的東西芳绩。這個時候就需要了解動畫的實現(xiàn)了，F(xiàn)lutter 提供了很多動畫構(gòu)建方式撞反，比如：

• 基礎(chǔ)動畫組件：例如 AnimatedContainer妥色，AnimatedOpacity 等等，通過這些組件可以實現(xiàn)簡單但有趣的動畫遏片。
• 動畫復用：使用 AnimatedBuilder 可以構(gòu)建可復用的動效嘹害。
• 動畫曲線：Flutter 自帶了很多動畫曲線效果，如果不滿足也可以實現(xiàn)自定義曲線吮便。有了動畫曲線吼拥，你就可以定義一些自己的動畫過渡效果了。
• 動畫插件：pub上也提供了很多動畫插件线衫，例如 Lottie 就可以將 AE 的動畫轉(zhuǎn)換為 Flutter 動畫凿可。如何查找動畫插件，這需要懂得搜索授账，比如搜索關(guān)鍵字 Animation枯跑，或者經(jīng)常逛一些技術(shù)社區(qū)，會讓你的視野開拓很多白热，也許敛助，不經(jīng)意間就能發(fā)現(xiàn)一個酷炫的插件。

繪圖

當你的動畫都能搞定的時候屋确，你會發(fā)現(xiàn)產(chǎn)品和設(shè)計可能已經(jīng)對你刮目想看了纳击，這個時候他們提出的交互或者界面效果會提高（千萬別覺得升級自己的技能是在給自己挖坑）续扔。比如，可能會出一個奇怪的外形焕数，然后需要你實現(xiàn)纱昧，這個時候就需要用到繪圖了。繪圖其實需要挺高的數(shù)學知識輔助的堡赔，你可能需要提前復習一下高等數(shù)學识脆、線性代數(shù)知識?????? —— 所以大廠篩選學校和學歷其實也有一定的道理的，這些篩選出來的人的基礎(chǔ)知識一般都不會差善已。

• ClipPath：自定義裁剪路徑對于繪制有規(guī)律的形狀來說可以輕松搞定灼捂，當然有些復雜的可能需要一些貝塞爾曲線知識。
• CustomPaint和 Canvas：使用 CustomPaint 和 Canvas 可以隨心所欲地繪圖换团，包括你想搞個小游戲也行悉稠。但是，這個也是很燒腦的一環(huán)艘包，說到底的猛，數(shù)學真的很重要！
• 計算機圖形學（CG）：這算是繪圖的理論支撐辑甜，有計算機圖形學知識的支撐，會讓你繪制自定義圖形時候得心應手袍冷。

本地數(shù)據(jù)存儲

隨著網(wǎng)絡(luò)的升級磷醋，本地數(shù)據(jù)存儲可能不像之前那么重要。但是胡诗，不論是對用戶體驗還是減輕后端壓力都是必不可少的邓线。譬如，微信就把整個個人的聊天記錄存儲在了本地 —— 既節(jié)省了服務(wù)器的存儲空間和加載請求量煌恢，還能夠?qū)ν庑Q是“保護個人隱私”骇陈。本地存儲主要有三個方面：

• 簡單鍵值對的存儲：可以存儲一些配置信息、登錄會話信息瑰抵，避免反復從服務(wù)器讀取你雌。在 Flutter 通常是使用 SharedPreferences 實現(xiàn)。
• 文件存儲：比如應用內(nèi)下載的文件管理二汛，日志文件等婿崭，可以使用文件管理實現(xiàn)。通常會使用到 path_provider 插件實現(xiàn)肴颊。
• 關(guān)系型數(shù)據(jù)庫：移動端大部分都采用了 SQLite 數(shù)據(jù)庫氓栈，SQLite 的數(shù)據(jù)庫操作語法和 MySQL 這類的標準 SQL 基本一致，可以用于存儲關(guān)系數(shù)據(jù)婿着。在 Flutter 中也有不少封裝好的插件授瘦，比如 sqflite醋界。

頁面導航

實際上頁面導航在一開始就會用到，大部分情況下提完，自帶的導航和路由管理都能夠滿足需求形纺。對于路由可以按如下方式進階：

• 自帶路由的掌握：比如匿名路由，命名路由氯葬，路由傳參挡篓，路由攔截等；
• 路由插件的應用：了解如 fluro帚称、GetX 的路由管理的優(yōu)缺點官研，選擇使用自帶的路由管理還是使用第三方插件。
• 2.0路由：這個如果是在 Web端的話建議了解一下闯睹，App 端個人感覺有點重戏羽，學習成本相對較高。當然楼吃，因為剛出來沒多久始花，估計以后也會有簡單易用的插件幫助我們使用。

自有插件

如果你的公司業(yè)務(wù)條線比較多孩锡，也許此時已經(jīng)成為公司大神的你會被邀請做基礎(chǔ)設(shè)施建設(shè)酷宵，或者是你自己想為開源社區(qū)做做貢獻，這個時候就需要構(gòu)建自有插件或開源插件了躬窜。Flutter 提供了插件構(gòu)建模板工程浇垦，你可以按步驟構(gòu)建自有插件，然后供整個公司的各個業(yè)務(wù)條線使用荣挨，提高各個業(yè)務(wù)條線的生產(chǎn)力男韧。

原生交互

原生交互分為三個部分：

• Flutter為原生提供服務(wù)
• Flutter 使用原生提供的接口
• 原生頁面與 Flutter 頁面之間的跳轉(zhuǎn)

這塊對于混編的應用來說是必不可少的，此時你的知識體系需要升級了默垄，你需要學習安卓的 kotlin 開發(fā)此虑，iOS 的 Swift 開發(fā)（呃，本來想一站式搞定口锭，結(jié)果又繞回來了）朦前。當然，到這個階段鹃操，相信這些已經(jīng)難不倒你了况既！

應用發(fā)布

恭喜你！你的應用可以在各大應用市場上架了组民！記得我的第一個應用在 AppStore過審的時候別提多興奮了（之前被拒了好幾次??????）棒仍！如何進行應用打包這個搜索一下就能搞定了，但是如何應對AppStore 每年都變的審查規(guī)則也是一場斗智斗勇的過程臭胜。 而安卓莫其，如果搞定碎片化的操作系統(tǒng)分布也是頭疼的一件事情癞尚。建議提前在應用內(nèi)做應用統(tǒng)計，以及異常上報乱陡，避免發(fā)布后在用戶機器上出現(xiàn)奇怪的問題浇揩。

后續(xù)

技術(shù)永無止境，再往后憨颠，你可能會深入去做性能優(yōu)化胳徽、應用架構(gòu)設(shè)計。這些方面很大程度靠個人平時的積累爽彤，多輸入新的知識养盗，同時了解其他的應用框架和特性（不限于 Dart，比如 Java 的 Spring 框架适篙，Web 端的 React往核、Vue）都會讓你對當前的應用架構(gòu)設(shè)計有新的認識。擴充視野和技術(shù)深度嚷节，也許你就是下一個 CTO 的人選????????????Ｄ羧濉！硫痰！