[研討會心得] LINE Shopping App with Flutter: 使用 Flutter 來打造 LINE 購物的手機雙平台應用

寫在前面

大家好，我是 LINE Taiwan DevRel 團隊的 Evan Lin。很開心在這裡跟各位分享本年度的第三場開發者小聚中，由 LINE Client Team - Evan Fang 所帶來的分享 - 「 LINE Shopping App with Flutter 」。

KKTIX 活動網頁: 活動網址

活動全文網址： TBD

投影片

演講影片

什麼是 「LINE 購物 App」?

(LINE 購物 App 功能介紹)

講者分享如何透過 Flutter 來開發下載榜第一名的 「LINE 購物 App」。 首先主要提到 LINE Taiwan Client App 團隊主要有負責的產品有:

• LINE TODAY 的 App （在印尼有上架）
• LINE SDK 也就是大家看得到的開源套件：
  • https://github.com/line/line-sdk-android
  • https://github.com/line/line-sdk-ios-swift
• 當然也有協助開發 LINE App 的一些功能。
• 最新的也就是今天要介紹的「LINE 購物 App」

關於 「LINE 購物」的介紹

LINE購物 與多家知名購物網站合作，匯集超過2,000萬件商品，只要在搜尋處輸入想找的商品，讓你一個網頁就能一次看各家購物網站的商品資訊和價格，讓你從此不用處處比！透過 LINE購物 不僅僅可以一站找到你需要的商品，還可以獲得更多的回饋。

Flutter 打造 LINE 購物專屬 APP

為了提升更佳的使用者體驗，打造更精緻的服務介面，LINE 購物也決定在今年推出了專屬的 APP 。 但是希望能快速地到使用者的反饋，並且即時的改善更好的使用者體驗。 開發團隊選擇使用 Flutter 作為開發的程式架構，透過 Flutter 可以一次開發出 Android 與 iOS 的應用。 而選擇 Flutter 的理由如下:

效能考量:

以整合性設計框架而言，透過 Widget Rendering 可以讓 Flutter 直接在 Canvas 上面操作，具有類似於 Native App 的效能。

快速開發:

單一的 code base 來開發兩個平台的 App。在 UI 元件的開發上，很適合透過 Flutter 使用。可以確保 UI 設計的一致性，讓使用者有相同的使用體驗。

Flutter 支援 Hot reload 可以在 IDE 上面只重新編譯更新的部分，能夠快速的看到變更的成果。

豐富的開發資源:

豐富的官方導覽教學，還有 Dart Devtool 與 pub.dev 開發資源可以參考。

最後成果

最後的成果也相當的亮眼，使用 Flutter 可以在三個月之內於 iOS 與 Android 平台上完成一致性的使用設計體驗。 並且獲得當月份的下載量第一名的肯定。

遇到的問題分享

當然在使用 Flutter 開源套件也會遇到一些問題，但是 LINE 開發團隊也有跟 Flutter 團隊回報並且溝通相關的問題。目的希望能讓套件更完善，也能讓產品更符合使用者期待。 以下條列式一些問題:

• 問題： Flutter 在 Android 上無法變更鍵盤語言
  • 解法:
    • 使用 Hybrid composition 並且更新 Flutter 到 1.22 版本之後。
• 問題： Hybrid composition 在某些狀況下會 crash app
  • 解法：
    • LINE 提供相關解法與完整複製流程，並與 Flutter 團隊共同解決。
• 問題：在可以上下滑動的頁面呈現大量UI元件時，滑動時經常有記憶體不足的問題。
  • 解法：
    • 修改讀取方式，僅使用者看到的部分(Viewport)會使用記憶體。釋放不在 Viewport 的UI元件資源。

小結

講者也分享了，目前 Flutter 很適合開發在不複雜的頁面。具有較高的效能，快速迭代與開發的工具，還相當的容易學習。但是如果需要開發比較複雜的頁面時，需要有能力追蹤到底層套件的原始碼，發生問題的時候才能夠解決。

最後也希望大家一起來下載一下 LINE 購物 App 感受一下 Flutter 開發出來的效能吧！！