每日筆記
前言
今天有以下幾個主題：
- Flutter Learning Note
- Flutter Addition Thoughts
- Flutter Learning Roadmap
- Flutter Forms
Flutter Learning Note
今天跟著教學，完整把自己在 Flutter 的第一個 App 做完了！Your first Flutter app 左邊連結是教學網站！
（其實昨天學、看的也是這篇，這次採詳讀、手寫筆記的方式，覺得雖然慢了點但其實對核心把握得滿好的。）
其實 Flutter 最重要的概念真的就是 widget，widget 有很多，為此我特地去找了如何了解 widget => Flutter Gallery。
若想知道 Flutter 有哪些 widgets 可以用，以及如何使用，可以去上面這個網站參考，裡面有很多範例。
今天學習到的概念：
- SizedBox：有時候如果想在 widgets 之間有點間隙，可以在中間放一個 SizedBox，他有width, height 可供調整距離。
- 有 Column Widget 可用，肯定少不了 Row Widget。這兩者彼此是可以互相 wrap 的，使用要看設計需求。
- 如果要讓物件左右置中，可以使用 Center Widget 把原有 Widget 包起來。（昨天提及的輔助工具中就有自動 Center 包裹的功能）
- 在 Flutter 也有 State 管理。Stateless 是指自己沒有 state 的 widget，有 state 的會是 stateful。
React 裡也有類似概念。有些 Class 不會有自己的 State，純粹使用父物件的 State。
Note*: 每個 Stateful Widget 都需要與其對應的 State Object 進行配對。 - 有 State 管理就會有 Listener 跟 Sender 的概念。
在 Node.js 中 asynchronous 的 function 在執行完成後都會進行呼叫，就會有一個 Listener 去監聽呼叫，作出相應的行動。
在 Flutter 中如果更動 State，也要發送訊息給有在監聽的 widget 說「哈囉！State 改變囉！麻煩改動一下！」，告訴他們「你該產生反應囉！」
在 React 中應該也有，不過我有點忘了，不多做論述。 - 多數時刻是無法在單一頁面（Page）中呈現所有東西的，而一個 Page 其實也是一個 Widget。
今天學到如何在一個 “Home Page” 中，根據 selectedIndex 決定該顯示哪一個子 “Page”。 - Expanded Widget 會盡可能爭取更多的空間。當有兩個 Expanded Widget 遇到時，會均勻的搶奪最大空間。
- extended property 可以決定是否顯示 label，今天有學如何根據 constraints 去決定是否顯示。
也就是所謂的 “Responsiveness”。（”Responsiveness” 的重點在於會根據「視窗大小、形狀」去決定如何顯示，而不是會不會顯示 Label XD，顯不顯示 Label 只是很小很小的一環。） - 要實現 Responsiveness 有很多相關的 Widget，例如 Wrap, FittedBox, LayoutBuilder 等。今天實現 Responsiveness label display 是使用 extended property 配上 LayoutBuilder。
“LayoutBuilder’s builder callback is called every time the constraints change.”
包括 “resize window”, “rotate screen”, “widgets next to it grow in size”。 - 為了顯示清單，今天有用 ListView 和 ListTile 這兩個 Widget。
- 在 variable name 前面加上底線（_）會使 variable 變 private。
以上大概就是根據 Your first Flutter app 學習的內容筆記。
Flutter Addition Thoughts
藝術版面
邊學邊反思，才學得快與精。
在實際 Coding 之前，能預先設計、規劃要寫什麼會比直接硬幹來得有效率。
Flutter 雖然是一個 Framework for frontend and backend，但目前為止應該還是以 frontend 為大宗。
「以 Widget 為核心概念的 frontend framework，有哪些工具可以幫助我做 Coding 前的設計、規劃呢？」
這是我在學的過程中，就一直思考的事。
第一個就是 “Panache”！
Panache 可以幫助我們快速設計、定義應用程式的主題、色彩和風格。
Flutter Roadmap
學東西講究系統性，有系統才不會學到迷思方向。
如今已經做出第一個小小的 Flutter App，算是「體驗」完用 Flutter 寫 App了。接下來要想的是如何專精這項工具，成為所謂的 “Expert”，追求「Flutter 匠人精神」。
要一個不懂 Flutter 的人寫一個 Roadmap 實在不合常理（哈），因此我去 Youtube Copy 了一份回來。
不得不說，看完這 Roadmap，真的是和學 React 有 87% 的相似度，甚至要說有 95% 以上我都接受。
Dart 部分我就跳過了，語言這東西看再多沒有實際應用，有概念也記不住。
有位語言學專家就曾這麼說：「要學語言最快的方式就是實際去當地生活。」
比起看書背了老半天，直接把自己丟入 Flutter 實際開發、撰寫中比較實在。
初學者
右圖 – 說明 Flutter Beginner 可以怎麼學。
- Basic Navigation with Navigator 1.0
之所以是 1.0 是因為 Flutter 有更進階的 Navigation 方式。初學者先學 1.o 即可。
Intermediate
左圖 – 是給學完初學部分，想要更近一步學習時的路線。
下圖 – 是給想要成為 “Expert” 的人參考的。
其實影片中講者有說，要想成為 “Expert” 一定要大量的實作經驗，空有一堆知識是無法讓一個人成為 “Expert”的。
Flutter Forms
Key
在剛進入 Form 教學時，我看到了 {super.key} 這樣的東西。
於是我就查了一下這是什麼概念、用法，於是我發現，我其實沒有很了解。
我查到的部分大概是說，在 Flutter 裡要識別不同的 widget，就是透過 key。而 key 還可以用來判斷 widget 是否需要重新構建，或是保留之前的狀態。
腦中算是有點感覺，但又很難講得清楚，之後會多留意這部分。目前有一個舉例，是 ListTile 裡會有 key 這個 property，而這裡的 key 用法就跟 React 中為了辨識清單內不同的 Item 所需的 key 一樣。這個可以理解。
而 widget 繼承、構建相關的就有待研究了。
Build A Form with Validation | Flutter
最簡單的做法，有三個步驟：
- Create a “Form” with “GlobalKey”
- Add a “TextFormField” with validation logic
- Create a button to validate and submit the form
GlobalKey
GlobalKey 是存取 form 較推薦的方式，當然如果 widget tree 很複雜，也可以使用 Form.of() method 去存取nested widgets.
TextFormField
表單是 Form widget，表單裡需要有輸入欄位，在 Flutter 中是 TextFormField widget。
Submit Button
當輸入完所有需要的資料後，就需要有送出鍵。當我們按下 Submit Button 的時候，就會驗證輸入的內容是否 valid。
我們可以用第一步建立的 key，去存取 FormState，FormState 在建立 Form Widget 時 Flutter 會自動幫我們創建。
而 FormState 中有 “validate()” method 來檢查輸入資料。
今天做的影片分享
影片主題：Flutter 應用介紹！