每日筆記
前言
今天有以下主題：
- Flutter Practice
- Flutter Learning Note
Flutter Practice
將 Flutter 官方的 Cookbook 中的 Form Part 看完後，決定根據先前的經驗還有 Form part 中的教學來實作一個 Register Form。
在開始 Coding 前，少不了草稿上的預先設計！
一個簡易的表單就出來了！
在這個表單中，包括：
- Email 輸入欄位：
這個欄位需要驗證輸入資料是否符合 Email 的格式。 - Username 輸入欄位：
這個欄位需要確定輸入資料的長度小於 20 個 character。 - Password 輸入欄位：
這個欄位需要驗證密碼是否包含 1 個大寫字母，1 個特殊符號，以及密碼長度大於 6 個 character。 - 每個欄位都需要 Focus 的能力，在輸入資料有誤時，Focus 在該欄位上。
除了功能性外，盡量使用了一個 TextFormField 能夠使用到的外觀設計。
包括：
- icon
- border
- labelText
- counterText
底下是成果！
撇除圖中 error text 僅呼叫使用者填寫資料，程式確實能夠完成上述提及的需求，有興趣體驗了解的人，可以前往我的
GitHub – real_world_practice_1 資料夾 下載程式碼實際執行試試！若有其他疑慮或建議，歡迎底下留言區留言！
並未盡善盡美
在實踐這個表單的最後，是加入 Focus 的能力。
在這次實踐中，Focus 會根據最下層沒有填寫的資料一路往上 Focus。舉例來說，如果 password 欄位和 username 欄位都沒有填寫，程式會先 focus 在 password 欄位。
如何控制 focus 的順序，我花了將近兩個小時研究，仍然沒有得出想要的結果（從最上層開始往下 focus）。
我試過 FocusTraversalGroup 搭配 OrderedTraversalPolicy 還有 FocusTraversalOrder 與 NumericFocusOrder，仍然無法達到想要的目標。目前有兩種可能：
- 我對於 Focus System 的運作方式還不夠瞭解
- Flutter 有 Bug
在此紀錄未來需要專研的 Subject：Focus Management
除了 Focus 的部分，對於外觀的設計我也還有待加強。
兩者都屬較進階的議題，待完成 Flutter Roadmap 中的 Beginner Part 之後，將繼續專研！
Flutter Learning Note
在實作中，還是會遇到一些先前沒有特別注意，或者新學到的理論知識或技術：
- 上次提及的 const 效能增加，有更具體的觀念。
在設計表單的過程，會遇到有些地方會發生變動，例如 counterText 若想隨著輸入欄位內的字數改動而變動，InputDecoration() 就不能宣告為 const，然而 InputDecoration() 底下的 OutlineInputBorder() 是不會變動的，它就需要宣告為 const 增加效能。
（原本 const 宣告在 InputDecoration() 上，不需要額外在 OutlineInputBorder() 上宣告 const，也就是說，一但同級屬性需要變動，其他不會變動的部分就要宣告 const。總結：為了效能而宣告的 const 會因為變動需求而往下傳遞。） - 為了 Focus，還不小心摸索到 Keyboard Focus System 去，這是另一個進階議題。
- Container vs SizedBox
這兩個的差異在哪呢？
SizedBox 單純用於指定「固定大小的框」，因此效能會比 Container 高。
Container 可以提供佈局、對其、填充、背景顏色等功能，還可根據需求自動調整大小（手動也可以），能做的事比 SizedBox 多，因此純效能上比 SizedBox 差。
若單純想調整、排列 Widget 大小和間隙，使用 SizedBox 比較好。
若有其他外觀上的需求，可以使用 Container 完成。 - 在設計表單時，有發生直屏可以完整顯示，但橫屏會 overflow 的問題。我使用的解決辦法是讓表單可以活動，而 container 則會根據螢幕而變動。
讓表單滑動的方式是透過 SingleChildScrollView()。
有兩個點可以進步：- 這次因為只有單一個表單，所以可以使用 SingleChildScrollView()，還可以想想是否有其他做法。
- container 根據螢幕變動的方法，還不是非常清楚如何設計與做到。
參考資料
[1] Flutter / Google – Material Symbols and Icons
[2] Flutter – TextEditingConrtroller class
[3] Flutter – TextFormField class
[4] Flutter – TextField class
[5] Flutter – FocusNode class
[6] Flutter – Cookbook – Form – Focus and text field
[7] Flutter – FocuTraversalGroup class
[8] Flutter – FocusTraversalOrder class
[9] Flutter – NumericTraversalOrder class
今天的影片分享
影片主題：學習 Flutter Form 該知道些什麼？