Flutter Dojo的設計之道

認識Flutter是在18年，移動端開發日趨成熟的狀況下，不少開發者都在尋求跨平臺開發的終極法門，在通過了webview、RN的痛苦以後，Flutter的出現，給跨平臺開發帶來了一線曙光。自此，便開始了Flutter的學習之路，佈道師之路，修仙之路。

築基

Flutter的學習曲線很奇怪，像坐過山車同樣，初學很簡單，上手幾天，很快就能寫一些基本的界面，可是很快就遇到了瓶頸，由於官方的Widget愈來愈多，愈來愈複雜，學了忘，忘了學，有些人突破了，成爲了一代先驅，有些人則被搞的一團霧水，大罵一聲，垃圾Flutter，毀我青春。

相信大部分上手的開發者，都會抱怨兩個問題，一是Widget太多，二是嵌套太多。嵌套太多的問題，沒什麼好解釋的，大部分有這種抱怨的人，都是由於不知道如何正確的使用茫茫多的Widget而惱羞成怒的。

對於UI界面來講，樹形結構是表現UI最好的方式，固然能夠經過不少其它的方式來減小嵌套，但simple is fast，Android xml佈局中，嵌套近十層的佈局比比皆是，這對於寫UI來講，並不會形成什麼困擾。

可是Widget太多，確實是一個比較麻煩的問題，這裏的學習什麼考驗開發者的學習能力，Flutter雖然在設計Widget方面略顯隨意，可是官方所給出的Widget，幾乎都是比較實用的，覆蓋了開發的方方面面，只用經常使用的那些Widget，確實也能夠完成大部分UI的開發，可是，掌握更多的官方Widget，會讓你的開發更加方便。

我在學習的過程當中，天然也遇到了這些問題，通過一年多的沉澱，逐漸對整個架構有了一些認識，因此也萌生了一些想法，想經過一個Flutter App，來幫助初學者、進階者快速掌握Flutter，這纔有了Flutter Dojo的雛形。

Dojo，源自日語「道場」。我但願的是經過Flutter Dojo讓初學者快速掌握官方Widget的經常使用使用方法，讓進階者掌握Flutter開發組件、封裝組件的基本思路，讓學有小成者更加高效、更加快速的進行Flutter開發。

因此，我在最開始的時候，將Flutter Dojo分爲了下面幾個部分：

• Widgets
• UI Pattern
• Animations
• Back-end Util

Flutter Dojo的設計主要圍繞下面三個部分展開：

• 良好的演示效果
• 簡單明瞭的代碼
• 好看的界面設計

整個項目的代碼都以上面幾點做爲目標，代碼力圖簡潔，不使用複雜的架構設計和抽象，每一部分的演示代碼幾乎均可以單獨使用，同時儘量的美化UI。

Widgets

Widgets部分的設計思路是爲了演示Flutter中茫茫多的Widget的具體使用場景和功能，雖然只使用Flutter提供的一些基本Widget，已經能夠實現大部分的界面、功能開發，可是，瞭解更多的Widget，可讓開發者的開發思路更廣，使用更加合適的Widget來完成合適的開發場景。

通過迭代，Widgets部分已經完善了官方的全部Widget，以及官方在Category中未列舉可是有很大實用價值的Widget。

UI Pattern

UI Pattern部分的設計思路是爲了幫助開發者瞭解如何使用Flutter來拆分大部分APP中的界面模板，經過Flutter實現一個個UI組件，來組合成完整的Flutter界面。

經過UI Pattern的學習，可讓開發者瞭解Flutter的具體解題思路，如何拆分UI的實現套路。

Animations

Animations部分的設計思路是爲了讓開發者對Flutter的動畫有一個完整的認識，針對不一樣的場景使用不一樣的動畫方案，同時，對大部分常見的動畫場景進行梳理，完成動畫場景的歸類。

Back-end Util

Back-end Util這部分主要是針對Flutter中的非UI場景知識點進行的梳理，包括數據持久化、解析、狀態管理等等。

最初的這一版，在GitHub的私有倉庫迭代了將近一年，才終於基本定型Release出來。

出竅

有了具體的設計思路後，我就開始構思如何來實現了，Flutter Dojo，首先是一個Demo，即演示類的App，因此，它必定是重在代碼，但卻能夠經過Demo的分解，將功能演示出來，其次，雖說是Demo，但毫不是一個粗製濫造的UI，長得好看，才叫Flutter Dojo，長的醜，只能叫Flutter Demo。因此，最後的設計風格調整了好幾回，最終定稿以下。

     

這四個部分，是Flutter Dojo的核心功能，分別對應了上面提到的四個部分。

Widgets

Widgets部分的設計徹底按照官方的Flutter Widget Category來進行分類。

     

一級分類和二級分類，分類整理了官方的全部Widget和簡介。

固然，核心是每一個Widget的使用場景的展現。

     

這裏只展現了幾個Widget的演示界面，更多的Widget，請自行使用。

UI Pattern

UI Pattern的分類，我是按照組件的功能進行劃分的。

     

Animations

Animations的分類一樣是根據動畫構建類型來進行分類的。

     

Back-end Util

Flutter雖說是一個UI跨平臺框架，可是其征途依然是星辰大海，因此即便是非UI的東西，Flutter依然會包含，因此，這部分就展現的是各類非UI的Flutter開發技術點。

     

有了這四部分的加持，Flutter Dojo的核心功能就算是完備了，固然，這裏面的分類和Demo依然在不停的更新中，因此，Flutter Dojo只會愈來愈完善，不過萬變不離其宗，其設計思想依然是圍繞着這四個方面展開的。

至此，Flutter Dojo 1.0 發佈。

分神

在設計完這四個核心的方向以後，我開始本身使用Flutter Dojo來鞏固Flutter的學習，在使用過程當中，逐漸發現了一些不足，好比在使用App的時候，不能查看代碼，雖然場景設計的是經過界面來掌握Flutter Widget的學習，可是，並非全部的場景都能完美的讓你學到這個Widget的使用精髓，因此，在App端查看代碼是一個剛需，在學習場景的時候，遇到不懂的地方，能夠直接經過查看代碼來了解具體的使用原理。

其次，Flutter Dojo的代碼設計爲copy anywhere的，Demo中的代碼，幾乎所有是能夠徹底複製使用的，這也是爲了初學者考慮，整個代碼不包含複用、繼承等架構設計，開發者經過單個的Demo示例就能夠徹底掌握，而不是要先了解其它基類、抽象的實現等等，因此要實現代碼的輕鬆copy功能。

另外，因爲Widget和Pattern分類愈來愈多，查看起來常常會忘記分類的具體位置，因此，搜索功能也是亟需添加的。

所以，在Flutter Dojo 1.0的基礎之上，2.0版本新增了搜索、查看源代碼以及分享功能。

     

搜索功能很是強大，支持模糊匹配、先後綴匹配，效率高、速度快。

查看源代碼功能，使用Markdown解析源代碼，能夠直接在App中查看代碼。

分享功能可直接將源代碼分享出去，實現copy anywhere。

至此，Flutter Dojo 2.0 發佈。

合體

Flutter Dojo通過兩個版本的迭代，不只僅在功能上更加完善了，分類和Demo的拆解也更加優秀了，因此，在Flutter Dojo 3.0上，我增長了一些信息流的設計，讓開發者在學習這些現有知識的基礎上，可以更加好的接觸到一些更新的Flutter文章，因此，這裏我設計了一個Feed功能，將掘金上的Flutter Tag下的文章聚合到Flutter Dojo中。

 

至此，Flutter Dojo 3.0 發佈。

渡劫

本篇是Flutter Dojo解析文章的總綱，後面會有一系列文章來進行分析Flutter Dojo中那些鮮爲人知的祕密。

飛昇

Flutter Dojo具體該怎麼使用呢？首先，你們能夠在GitHub下載最新的Flutter Dojo Apk

Github Actions APK download

或者在【百度應用市場】【小米應用市場】搜索【Flutter dojo】下載最新的Apk文件安裝。

先熟悉總體結構，在空閒時間，對感興趣的Demo進行學習，遇到難點，能夠經過App內置的查看代碼功能查看具體代碼，或者經過分析功能將代碼copy出來分析。

當你以爲總體差很少後，能夠將整個工程clone下來，針對代碼和工程作進一步的學習。

修仙

Flutter Dojo開源至今，受到了不少Flutter學習者和愛好者的喜好，也有愈來愈多的人加入到Flutter的學習中來，因此我建了個Flutter修仙羣，可是人數太多，因此分紅了【Flutter修仙指南】【Flutter修仙指北】兩個羣，對Flutter感興趣的朋友，能夠添加個人微信，註明加入Flutter修仙羣。

 

項目地址：

https://github.com/xuyisheng/flutter_dojo

歡迎你們前來star，讓更多的開發者享受到Flutter的開發樂趣。

本文分享自微信公衆號 - Android羣英傳（android_heroes）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。