前言

我目前從事Flutter桌面應用的開發，深刻領會到Flutter功能的強大。Flutter對于桌面的支持已經很不錯了，網絡、數據庫、UI界面這三者都已經完備。在眾多開發者的推動之下，Flutter正在不斷壯大和完善，我相信它的未來是光明的。

Flutter框架中內置的Widget有300多個，對于一個初學者而言，把它們全都看完是不現實的，也沒有必要。很多初學者認為Widget是Flutter的一切，其實Widget只是半壁江山，Flutter還擁有強大的繪制接口、異步處理能力、完整的網絡、文件操作接口以及狀態管理工具。

本書主要想讓初學者對Flutter有一個比較全面的認識。我覺得一次學習過程就像一次旅行，對我們要去的地方從全然不知，到漸漸熟悉，當我回首時，發現這一路的成長中包括了困惑、猶豫、興奮、痛苦、快樂。現在，我又回到了起點，背起行囊帶你一起出發，一點點去認識Flutter。

旅途之初，我會為你備好行囊和工具：介紹Debug和開發工具，然后介紹Dart語言和基礎的組件使用。本書介紹了很多實用的組件，以及動畫、路由，還介紹了一些Flutter框架渲染層的知識和相關源碼，雖然不是非常深入，但會讓你對Flutter的了解更加深入。本書還包括數據的處理和狀態管理、異步處理、數據庫操作等，最后介紹了插件和混合開發。

本書沒有把紛繁復雜的組件都講了，只挑一些重要的組件深入剖析，讓讀者學會認識組件。為了讓讀者掌握如此多的組件，我特意開源了一個FlutterUnit項目，地址為https://github.com/toly1994328/FlutterUnit。其中收錄了約250個組件，每一個組件都會附加詳細的說明和示例代碼。這個項目目前已支持Android、iOS、MacOS和Windows系統，可以幫初學者快速、直觀地了解Flutter中有哪些組件可以使用，以及如何使用。FlutterUnit項目可以全面搜索并具備完整的分類，可以很容易地找到想要了解的組件。開源的另一個好處就是方便更新與修改。

由于Flutter多平臺的特性，它的環境配置、開發環境搭建、模擬器運行等操作比較多，也比較簡單。但是實際應用中總會遇到一些問題，為此我綜合考慮了很多，最后決定在FlutterUnit項目中也列出問題及解決方案。在項目的主頁里還列出了關于Flutter在各平臺上的配置方面的文章。另外，我會不定期在Issues中分享一些經驗和錯誤處理方式，當然你也可以一起分享，這也是建立FlutterUnit的初衷。后期會根據Issues的分享將其加入FlutterUnit中，作為入門者的最佳助力。此外，在Issues的point標簽中，還會收錄一些易錯點和要點，對本書的勘誤也在Issues中指出。FlutterUnit是我的個人開源行為，任何人都可以享用。

本書主要面向有一定編程經驗的讀者，對基礎知識講解不多，如果你覺得本書太難，那你需要自行補充一些基礎的編程知識。遇到困難試著多讀幾遍，對著源碼仔細推敲，或許就能豁然開朗。如果書中存在錯誤，還請讀者見諒，有任何建議也請及時聯系我。

本書的源碼規劃

本書用的源碼Flutter SDK版本為1.12.13+hotfix.8。許多編程書的demo案例都按照章節組織，或每個知識點是一個小項目，這有很大的缺點：找起來比較麻煩，而且打開一個項目也很費時間，更大的問題的是項目產生的垃圾很占內存。所以按知識點分立項目并不可取。

由于Flutter可以讓一個個知識點獨立成Widget進行展現，因此本書將所有代碼放在同一個項目中。在學習的過程中你可以新建一個空白項目，然后一點一點累積成源碼的結構，記錄自己的成長。

例如，每章的源碼在一個day里，每個day中有相應的知識點包，每個包里都有一個可運行的main.dart文件，每一個包代表一個小知識點或小節。這樣就可以獨立記錄細碎的知識點，并且很清楚地記錄它如何一步步演變，比如狀態管理如何一步步演變得更優雅。

另外，Flutter可以指定運行的main入口，這就讓這種處理方式更加優雅，如下圖右側所示，這樣每個小的知識點包也可以作為單獨的運行塊。你可以快速切換，以查看該小節知識點運行的情況。也就是說，花3秒就能切換一個知識點。如果知識點在一個單獨的項目里，那么切換一個知識點至少需要一分鐘，也無法感受到知識的連貫性。

但這樣做也會存在一個缺點，就是如果一個項目中代碼過多，那么定位知識點會比較麻煩。一個服務器上的數據資源也是非常多而雜亂的，但是可以很方便地獲取特定資源，這歸功于統一資源定位符，即URL。

具體進行如下處理：你會發現在書中的相關源碼處專門有個頭標指向源碼的地址，如下圖所示。這樣你可以迅速定位到相關位置，只要運行該包下的main.dart就可以立刻看到該知識點的展示效果。你可以將它看作內存尋址，源碼就是資源庫，而標識就是指向某一資源的指針，使用該指針就能打開相應的資源。

希望書和源碼兩者結合能擦出智慧的火花，為你的閱讀過程帶來便利。

關于Widget圖鑒

為了讓大家對Flutter組件有整體的認識，我特意制作了Widget圖鑒，地址為https://github.com/toly1994328/FlutterUnit/tree/master/widgets_unity。

這些圖鑒以圖片形式放在FlutterUnit項目中，這樣方便維護和更新。其中包含大多數常用的Widget，圖鑒中的每個組件都可以在FlutterUnit項目源碼中看到。圖鑒主要包括StatelessWidget、StatefulWidget、SingleChildRenderObjectWidget和MultiChildRender-ObjectWidget組件，這四種組件涵蓋了日常工作中使用的絕大多數組件。

圖鑒提供常用Widget的基本效果圖，對常用的屬性進行標注，主要目的是讓初學者更直觀地了解常用組件，不至于被眾多組件弄糊涂。如果想要看某個圖鑒具體效果的實現，可以在FlutterUnit項目中通過全局搜索獲得。

你也可以在FlutterUnit的App中搜索，其中每個組件都有詳情介紹。每個知識點都會有對應的組件使用效果，點擊右側的折疊按鈕，可以展開對應的代碼，并且提供代碼的復制功能，這樣你可以很方便地得到一個組件用法的源碼。

本書知識規劃

我在寫作時更想專注于Flutter技術本身，希望讓你在每一頁都能學到東西。我還想向你分享一些我的思考方式和對問題的見解。另外，書中有大量的圖片、類比的手法，相信你在讀書過程中不會覺得太無趣。希望讓你有種背上行囊隨我旅行12天，我們共同見證、欣賞Flutter世界的感覺。

Day 1：初識Flutter與技能儲備。首先，重新認識Flutter初始項目，并在此基礎上提出兩個問題，借這兩個問題來介紹Debug的使用方法。然后，介紹Android Studio中針對Flutter的實用工具，“磨刀不誤砍柴工”，把“拖鞋”換成“運動鞋”再開始旅行。最后，分享一些關于Flutter中Widget的見解，從整體上先感受一下Widget，再說明組件抽離的必要性，不要把所有雞蛋（組件）放在同一個籃子（文件）里。

Day 2：Dart實用語法速覽。Dart作為新時代的編程語言，有著優秀且優雅的語法。本章分別從基礎語法、面向對象和Dart特殊語法三個層面展開對Dart語法的介紹，并結合實際使用以及源碼來學習。

Day 3：界面風格和簡單繪制。介紹Flutter中的兩種界面風格，以及一個簡單的App界面如何搭建。對Flutter的視圖層有一個整體的認知將為之后的學習打下基礎。另外，還介紹Flutter中的簡單繪制，可以看出Android等其他平臺的繪制技能在Flutter中完全適用。

Day 4：基礎Widget。首先通過基礎的圖文組件介紹屬性的使用，以及批量制作某屬性的對比圖，讓你擺脫“屬性黑洞”的束縛。然后以圖解的形式對容器組件和多子組件進行介紹，使你更直觀地認識各個屬性的作用，進而掌握基本的布局功能。

Day 5：列表與滑動。首先講述如何將一個組件抽離，封裝成條目以供列表使用，再通過ListView填充數據展現條目，通過一個聊天界面介紹如何實現下拉和上拉的功能。然后對滑動控制器和其他滑動進行介紹，如單子滑動組件和GridView、PageView以及Sliver家族。

Day 6：動畫與路由。詳細介紹在Flutter中如何實現動畫，從一開始的運動盒到可以動態變化的n角星，努力揭示了動畫的本質。然后介紹如何簡化和封裝組件，讓動畫更加強大、好用。本章介紹路由的跳轉、傳參、回參、管理、動畫等知識，將路由放在這里是因為路由與動畫有所關聯，掌握這些知識就可以創建一個相對復雜的界面系統。

Day 7：手勢組件與自定義組件。如果一個組件經常被用到，或者可以獨立于項目之外分享給很多人用，那么封裝成一個自定義組件是很好的方式。本章先簡單介紹Flutter中手勢的處理，并自定義一個手寫板，然后通過原生組件實現自定義組件；通過繪制組件可以了解如何在Flutter的畫板上繪制文字和圖片，以及進行一些復雜的數學計算。

Day 8：Flutter渲染機制。本章將深入Flutter框架層的源碼中，談論Widget、RenderObject、Element三棵樹，介紹Flutter的main函數是如何運行的，以及Element的加載流程，最后全面介紹State及其生命周期。

Day 9：異步與資源。本章將介紹異步與流這個強大武器，并通過文件的操作加深對兩者的理解。然后介紹Flutter網絡請求的方式以及對數據資源的處理方式。

Day 10：數據共享與狀態管理。本章先介紹數據傳輸中InheritedWidget的解決方案，然后介紹狀態管理的處理過程以及FutureBuilder和StreamBuilder的用法，最后介紹BLoC、Provider、Redux三個狀態管理工具及其使用案例。

Day 11：數據持久化和讀取。本章分別從數據庫、json數據文件、XML配置文件來介紹如何進行持久化處理，并介紹如何訪問數據庫，查詢結果并填充界面，并通過界面完成增、刪、改、查操作。

Day 12：插件及混合開發。首先介紹Flutter和原生平臺的通信機制，之后介紹幾個常用的插件，包括路徑和權限申請、音頻播放、視頻播放、圖片拾取、Web頁面，最后介紹Flutter與原生平臺的混合開發。

最后，感謝家人和伙伴們的支持和建議，感謝吳怡編輯的邀請，讓我有機會將這些技術知識分享給大家。希望大家在學習過程中能夠收獲滿滿。Flutter的旅程即將開始，試著深呼吸一下，和我一起出發吧，去見證Flutter的奇妙世界！

張德立（張風捷特烈）

于2020年3月10日