Flutter最佳入門方式——寫一個計算器

工做以來，我在學習新知識的時候，經常與在應試教育階段被傳授的方法做鬥爭——把書本的內容100%複製到腦中才算學會嗎？不會被使用或者不經常使用的知識，花費大量功夫去記憶纔算完美嗎？

Flutter的入門文檔給予了我很大的啓發，它並無把API文檔或者是整個框架的內容直接展示給初學者，而是經過一個簡單的計數器例子，從基礎的組件到手勢的監聽，再到狀態的改變，將Flutter最核心的思想展示的淋漓盡致。

我見過許多初學者，喜歡先將入門文檔、API文檔和教學視頻一字不漏地所有看完，卻歷來沒有打開編輯器，哪怕寫上一句Hello World。

我認爲的高效學習的方法是，學習掌握恰到好處能夠開始的基礎知識，經過操做來深刻學習，邊玩邊學，在這個過程當中發現本身不懂的部分，經過查閱資料，掌握不懂的知識，最後將所學知識從大腦中提取出來，以別人可以理解的方式教授給別人。

爲何是計算器？

• 佈局經典，能學會使用最重要幾個的Widget用法，迅速掌握經常使用的佈局，如Container、ListView、Row、Column、Expanded、FractionallySizedBox等等。
• 樣式簡單，能學會使用最經常使用的幾個佈局屬性，如padding、color、style、decoration（圓角、描邊）、alignment等等。
• 有輸入，能學會手勢的捕獲以及組件間的數據流動。
• 有處理，能學會Dart的基本數據類型的用法，如String、List、int、double、num、bool等。
• 有輸出，能學會什麼時候使用StatelessWidget和StatefulWidget。
• 不依賴UI，不依賴接口，成功運行Hello World就能夠當即開發，不要一開始就追求完美，由於它會阻止你行動，要知道「開始作」遠比「作好」重要。

如何開發？

1. 【總】觀察佈局，全局出發。

從全局出發，能夠發現是一個Column（垂直）佈局，子組件們按照必定的權重分配內部空間。顯而易見，頂部Text的權重爲2（flex:2），其他子組件ListView和Row的權重均爲1（flex:1）。

2. 【分】拆分組件，逐個擊破。

拆分組件，能夠按照業務邏輯拆分，也能夠按照佈局是否相同來拆分，在這裏筆者選擇的是按照佈局是否相同來進行拆分，緣由是業務邏輯並不複雜，佈局能夠複用的地方更多。如圖所示，以NumberButton組件及NumberButtonGroup組件爲例：

3. 【總】整合組件，理清邏輯。

實現每一部分的組件以後，就要回到總體的計算器邏輯，即如何完成 輸入->處理->輸出 ？

最後

實際上，這是我第一個完整完成的Flutter App，儘管我開發過數十個Android App和微信小程序，可是我好久沒有在完成一個項目以後如此興奮了，我找回了學生時代爲了求知而努力學習的感受。在提煉了本身的學習方法，並付諸行動，獲得的收穫讓人難以置信。

項目地址