Flutter修仙指南——初學者到底須要怎樣的Demo

Flutter，毫無疑問是今年最火的技術方向，做爲最先接觸Flutter的一批開發者，從入門，到如今，我也經歷了各類階段，從入門時的無從下手，到略懂以後被各類蜜汁Widget弄的焦頭爛額，到如今能夠創建起Flutter的總體知識結構，整個過程其實是很是痛苦的，這跟Flutter的設計思想有關——一切皆組件，這雖然是一個很是好的設計思路，可是茫茫多的Widget，會讓開發者陷入泥潭沒法自拔，很難創建起Flutter的知識架構。

在個人Flutter修仙羣中，常常有不少初學者在羣裏尋求Flutter的入門之道，雖然Flutter的官方文檔很是完善，社區裏面各類Flutter的Demo也很是之多，可是，恕我直言，基本沒有一個是能夠很好的幫助開發者創建Flutter知識架構的，今天，我就來分析下，初入門的Flutter修仙者究竟須要一個怎樣的Demo。

什麼是好的Demo

wiki上對demo的定義是：a demonstration of a product or technique。說的很清楚，就是對這門技術或產品的演示，Demo是初學者或者說是初次使用者瞭解產品、技術的第一通道。就跟人與人見面的第一印象同樣，Demo從很大程度上決定了這個產品推廣和宣傳上的好與壞。

那麼一個好的Demo究竟須要一些怎樣的特色呢？

首先，一個好的Demo須要將這門技術的使用細節和使用方式演示清楚，這裏要注意的是，是演示，是將這門技術的功能展現出來，這是Demo的核心，因此它的第一個特色就是——具備演示性。

其次，初學者是經過Demo來學習如何使用這門技術，因此Demo的代碼必須簡潔、易懂，這點很是重要，對於一門新的技術來講，初學者很難快速掌握這門技術的全貌，這就致使在看Demo的時候，很難站在一個全局的角度來看，因此當代碼很複雜的時候，就很難理解其中的含義了。

這跟咱們平時寫代碼同樣，對於不一樣類型的代碼，須要寫不一樣風格的代碼，舉個例子來講，對於頻繁變化的業務代碼，若是在設計的時候套用各類設計模式、各類抽象、繼承，看上去好像代碼寫的很牛掰，可是一旦這個架構沒法知足業務的拓展，就會變成噩夢，而一旦接手別人的這種代碼，那更是噩夢中的噩夢，因此對於這種代碼來講，開發者須要的是寫【易於修改的代碼】而不是炫技的代碼。而另外一方面，好比寫一個SDK，功能相對集中，業務須要相對穩定，這個時候就須要寫【架構良好的代碼】，在SDK中，開發者可使用合適的設計模式，來優化項目的架構，讓增長SDK的拓展性和穩定性。

對於Demo來講，咱們須要的是第一種代碼，即【超級簡單的代碼】，除了一些必要的工具類或者通用方法外，涉及知識點的Demo演示代碼都應該不作任何抽象，直接使用最基本的API調用來進行編寫，這樣的代碼雖然會產生一些冗餘，可是極大的增長了代碼可讀性和可學習性，這纔是學習Demo代碼的意義，也是Demo的另外一個特性——代碼簡潔、易懂。

再其次，Demo與人同樣，好看的皮囊老是讓人更喜歡。雖然只是一個演示程序，但起碼，要能看的過去吧，不是幾個隨便的按鈕，良莠不齊的排列，各類明顯的bug。

以上，咱們總結了一個好的Demo應該具備的特色：

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

這些東西雖然看起來簡單，可是真要作好，實際上也是很難的。

那些不那麼好的Demo

做爲一個曾經的Flutter初學者，我也看過社區中的很是多的Flutter Demo，下面就我瞭解的一些Demo來給你們看看，它們是不是一個好的Demo。固然，全部的評論都是基於上面的幾點特性來的，不針對任何開發者。

下面的這些截圖都是我平時看的一些Demo中的截圖。

這幾張圖是演示了Flutter中的一些Widget的使用方法，不過看完以後，我感受仍是一臉懵逼，不知道具體是什麼意思，這就徹底沒有體現出演示的效果。

再看下面幾張圖。

還有這些。

雖然是個簡單演示程序，但起碼，仍是設計一下吧。。。好歹文字要對齊是吧？

再來看看下面這張。

這是Google Sample裏面的代碼，你可能沒看出來這是什麼玩意，但你品，你細品，這些都是代碼。。。是的，它Demo裏面展現的代碼，實際上就是這樣一行行拼起來的，我真的是第一次看見這麼簡單粗暴的方法。

說到代碼結構，就不能不提Google的官方Demo，Flutter SDK中有不少官方提供的Demo項目，每一個項目都很是具備實戰意義，可是，我想當不推薦初學者去看，主要是由於一個很是簡單的演示程序，Google能夠寫的很是複雜，這不得不說Google開發者的代碼功底十分強大，可是，這也太不照顧初學者的感覺了。

我想作一個好Demo

那麼它來了：

https://github.com/xuyisheng/flutter_dojo

想知道爲何我以爲這是一個比較好的Demo嗎，這一切都寫在Readme裏面了，歡迎你們點擊連接去看下，也但願能幫助到廣大Flutter開發者。

歡迎關注個人微信公衆號——Android羣英傳