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 購物」的介紹

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.0 版本之後。
  • 問題: Hybrid composition 在某些狀況下會 crash app
    • 解法:
      • LINE 提供相關解法與完整複製流程,並與Flutter團隊共同解決。
  • 問題: 在可以上下滑動的頁面呈現大量UI元件時,滑動時經常有記憶體不足的問題
    • 解法:
      • 修改讀取方式,僅使用者看到的部分(Viewport)會使用記憶體。釋放不在 Viewport 的UI元件資源。

小結

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

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

立即加入「LINE開發者官方社群」官方帳號,就能收到第一手Meetup活動,或與開發者計畫有關的最新消息的推播通知。▼

「LINE開發者官方社群」官方帳號ID:@line_tw_dev

關於「LINE開發社群計畫」

LINE今年年初在台灣啟動「LINE開發社群計畫」,將長期投入人力與資源在台灣舉辦對內對外、線上線下的開發者社群聚會、徵才日、開發者大會等,已經舉辦30場以上的活動。歡迎讀者們能夠持續回來查看最新的狀況。詳情請看:

徵才訊息

《LINE 強力徵才中!》與我們一起 Close the Distance 串聯智慧新世界 » 詳細職缺訊息