2020 年 12 月，今年不受疫情的影響，一年一度的 Line 台灣開發者大會 (LINE TAIWAN TECHPULSE) 照常舉行。
2018 年上線的 LINE Shopping 是由 Line 台灣的工程團隊以 Flutter 開發，在本次的大會中，有兩場 Talk 是關於 Line Shopping 在使用 Flutter 上的經驗分享， 身為 Flutter 開發者，自然不能錯過這個機會。
這兩場 Talk 的主題分別為：LINE Shopping App with Flutter 以及 Efficient Event Tracking Mechanism with Flutter。
下面將兩場 Talk 的內容與各位分享：
BLoC (Business Logic Component)
在 Flutter 中所有的事情都是用 Widget 來完成，包括畫面、邏輯。
例如：我們想要繪製一個 Progress 我們可以使用 CircularProgressIndicator Widget，想要處理一個非同步事件，我們可以使用 FutureBuilder Widget 來處理。
在單一個 StatelessWidget 或 StatefulWidget 裡，如果同時有包含這些，數量一多可能不好將邏輯跟畫面分開，造成維護的困難。
那麼，我們該如何做呢？
Flutter 中有一個名為 BLoC 的 Widget，利用 BLoC 我們便可以將事件 (Event) 與狀態 (State) 跟畫面分開。
Tracking Event Tools
為了能夠得知使用者的操作事件 (畫面事件 — Screen Event，點擊事件 — Click Event)，LINE Shopping App 使用 Tracking Event Tool 來追蹤使用者的操作行為。
除了知名的 Firebase (Google Analytics)，LINE 團隊也使用了自身的 Tracking Event Tool。要在 App 端使用這兩種 Tracking Event Tool，講者介紹了他們所使用的架構，如下圖：
TrackingManager 介於 Tracking Event Tool 以及 Widget 之間，利用 TrackingManager 就可以避免直接與某一個 Tracking Event Tool 相依，導致無法輕易的增加另一個 Tracking Event Tool。
簡單小結一下：
前面介紹了兩種架構，為了將商業邏輯與畫面分開，可以使用 BLoC 將商業邏輯隱藏在 BLoC 之內；接者，我們只需要在我們的 Widget 上去關注事件 (Event) 與狀態 (State) 即可。
第二種架構則是透過 Manager 讓外部相依與 Widget 分離，透過多墊一層 Manager 的做法，Widget 不直接使用外部相依，而是讓 Manager 作為中間層，並且定義介面，就可以讓外部相依透過 Wrapper Class 轉換成 Manager，這樣的做法好處是只需要一個 Manager 就可以操控多個外部相依。
Secure Code Quality
開發 Flutter 時，要如何維持代碼的水準呢？除了使用 BLoC 將畫面與商業邏輯分離架構之外，另外就是需要測試。
Flutter 包含了三種測試： Unit Test、Widget Test 以及 Integration Test。
Unit Test (單元測試)：在每一個單元中，測試每一個情境，單元測試是不包含畫面的，換句話說，單元測試就是測試商業邏輯。其中，一個單元的定義有可能是一個方法 (method)，一個類別。
Widget Test (小部件測試)：前面的 Unit Test 是不包括畫面的，如果需要測試畫面，如按下按鈕之後，某個狀態會不會改變。此時就需要使用 Widget Test。
Integration Test (整合測試)：Widget Test 是測試單一 Widet 的動作。如果需要測試多個 Widget 的互動呢？則必須使用 Integration Test。
這三種測試的執行速度 (由快至慢)
Unit Test > Widget Test > Integration Test
維護的成本
Unit Test < Widget Test < Integration Test
Flutter WebView 中文鍵盤問題
LINE SHOPPING App 是一個使用 Flutter Widget 與 Native WebView 所完成的 App，在 1.22 前的版本，若在 Android 的 WebView 時使用鍵盤輸入，會發生無法切換中文鍵盤的問題。
很多類似的問題已經被提報給 Flutter Team，在 1.22 的 Stable 版就會包含 Hybrid Composition 來解決無法使用中文鍵盤的問題。
結論
因為只要維護一個 Codebase，現在有越來越多 App 改用 Flutter 來開發，包含 LINE Shopping，雖然只維護一個 Codebase 聽起來可以節省一半的時間，聽起來很誘人，但是由於 Flutter 相較於原生的框架來說，還是沒有那麼穩定，究竟會不會踩到某些還不完整的功能，而導致進度變更慢，這個就要看個人的造化了。不過，也正由於 Flutter 還有許多功能不完善，所以在開發的時候，就要更加小心，如果跟硬體有相關的項目竟量還是用原生的框架來開發會比較保險。
如果有開始使用 Flutter 開發，可以嘗試使用 BLoC 應用在專案裡，將畫面與商業邏輯分開，可以提升可維護性以及可測試性。
利用 TrackingManager 中介紹的架構，減少外部相依，我們就可以輕鬆擴展，簡單增加測試。
現在開發程式語言，沒有一個語言是沒有包含測試的，Flutter 當然也不例外，利用 Unit Test、Widget Test 以及 Integration Test 將整個 App 完整測試起來，相信 Bug 就會遠離我們了。
