Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
導入 Flutter 前你應該知道的事
Search
Weizhong Yang
November 09, 2019
Programming
7
1.1k
導入 Flutter 前你應該知道的事
GDG DevFest 2019
Weizhong Yang
November 09, 2019
Tweet
Share
More Decks by Weizhong Yang
See All by Weizhong Yang
那些年,被蘋果 Ban 掉的 API
zonble
0
82
為視障朋友打造行動應用
zonble
16
1.2k
Aspect Oriented Programming
zonble
2
170
Mac OS X 與 iOS 的 Audio API
zonble
11
910
大家來寫貪食蛇
zonble
7
4.3k
Debug Debug
zonble
6
340
Retina Mac
zonble
3
200
HTML 5 Native Drag
zonble
3
480
Other Decks in Programming
See All in Programming
Arm移行タイムアタック
qnighy
0
410
Thoughts and experiences on Rust and TypeScript
unvalley
2
210
Develop iOS apps with Neovim / vimconf_2024
uhooi
1
320
Reckoner における Datadog Browser Test の活用事例 / Datadog Browser Test at Reckoner
nomadblacky
0
190
気をつけたい!Desktop対応で陥りやすい罠とその対策
goto_tsl
0
200
【re:Growth 2024】 Aurora DSQL をちゃんと話します!
maroon1st
0
310
TypeScript でバックもやるって実際どう? 実運用で困ったこと3選
yuichiro_serita
17
7.6k
RWC 2024 DICOM & ISO/IEC 2022
m_seki
0
110
Haze - Real time background blurring
chrisbanes
1
420
SymfonyCon Vienna 2025: Twig, still relevant in 2025?
fabpot
3
890
layerx_20241129.pdf
kyoheig3
2
250
わたしの星のままで一番星になる ~ 出産を機にSIerからEC事業会社に転職した話 ~
kimura_m_29
0
110
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
334
57k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
48
2.2k
A designer walks into a library…
pauljervisheath
204
24k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
27
2.1k
Optimizing for Happiness
mojombo
376
70k
Designing Experiences People Love
moore
138
23k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Unsuck your backbone
ammeep
669
57k
Transcript
導入 Flutter 前 你應該知道的事 Weizhong Yang a.k.a zonble
[email protected]
關於我 • 在 KKBOX ⼯作的⼯程師 • 主要從事蘋果平台開發 • 做過 KKBOX
iOS、macOS、tvOS 版本,以及 KKTIX、 Uta Pass 等產品,最近⽤ Flutter 做了 KKBOX Kids • GDE for Flutter
我們的經驗 • 從 2018 年 Google I/O 之後開始接觸 • 2018
年八⽉開始⽤ Flutter 做⼀些 Side Project • iPlayground 研討會 App • ⼀些不太能夠公開的內部 POC… • 2018 年底嘗試⽤ Flutter 做 KKBOX 風雲榜 App • 2019 年五⽉推出 KKBOX Kids
今天的主題 • 什麼是 Flutter?Flutter 如何加速產品開發? • 你是否應該導入 Flutter? • 新⼿怎樣學
Flutter? • 你可能會遇到的疑難雜症 • Flutter 的軟體⼯程
什麼是 Flutter?
什麼是 Flutter • 把瀏覽器的元件打散後重組,打造⼀個逼近 Native 速度的 應⽤程式開發環境 • 瀏覽器:發送 HTTP
連線、抓取 HTML(CSS、JS)、把 HTML Parse 成 DOM、⽤ JavaScript 操作 DOM,⽤ Render 繪製畫⾯ • Flutter:AOT 編譯,直接組好 Widget Tree,⽤ Dart 語⾔ 操作 Widgets,Widget 同時包含元件與樣式,沒有另外拆 分 CSS
什麼是 Flutter • 在 iOS 上有⼀個 FlutterViewController、在 Android 上有⼀ 個
Flutter Activity,當中包含 Dart VM 與 Skia Render Engine • 沒有⽤到 UIKit 或是 Android UI Components,⽽是⽤⾃⼰ 的引擎繪製元件 • 在不同平台上可以繪製出完全相同的 UI • 預設提供 Material 與 Cupertino 兩套 Widget
Flutter 如何加速開發? • 規劃新產品時,⽬前的趨勢是雙平台同時開發 • 不同平台之間往往存在若⼲差異,同⼀套設計,在不同平 台上可能各⾃有開發上困難的地⽅ • 產品討論的時間不會少於實際開發的時間 •
Flutter 可以在不同平台使⽤同⼀套 UI 設計與 UI codebase,省下討論的時間,直接進入產品開發
與 HTML 跨平台框架比較 • PhoneGap/Cordova • Flutter Engine 效能明顯優於 Web
View • 執⾏編譯過的 Dart 程式,毋需在 runtime 解析 • 與 JS 相比,Dart 很少有出乎意料的⾏為 • Dart/Flutter 的 Pattern 也較眾多 HTML/JS 開發框架單⼀
與 NativeScript/RN比較 • RN 等框架標榜 Learn once, write everywhere。但是 Flutter
可以同⼀套程式在 iOS/Android 等平台執⾏ • 執⾏編譯過的 Dart 程式,毋需在 runtime 解析
你是否應該導入 Flutter?
怎樣的 App 適合 Flutter? • 原本是網站功能,但是要做成 Mobile App 的最適合 •
電商、售票、交友、報表… • 如果要做遊戲,還是建議使⽤遊戲引擎 • 如果要做更接近硬體功能的 App,像是拍照、錄影…還是 建議使⽤ Native 開發框架
導入之前 • 先確定你已經有完整的⼈才 • 先掌握新技術之後,再導入到實際的產品中 • 先從比較⼩的專案開始,再導入到比較⼤的專案
最後…你還是在做 iOS/Android App • 除了 Flutter 之外… • Cocoa Pods/Gradle
套件管理 • Android Manifest/ProGuard • App Code Signing • CI/CD • 上架流程
KKBOX Kids 的組成 • UI 使⽤ Flutter 製作 • 呼叫原⽣
Web View 實作 OAuth 登入 • 開發原⽣的⾳樂播放器 • ⾃⼰寫了 Facebook App Events 的 plugin
Flutter 團隊的組成 • ⽬前⼈⼒市場上還比較沒有所謂的 Flutter ⼯程師 • Flutter 簡化了很多⼀般性質的 Mobile
App 開發 • 但是 Flutter 不能完全取代所有的 iOS/Android 開發⼯作 • 因此,剩下來的平台相關問題,往往是特別困難的問題 • 在團隊中,還是得要有資深的 iOS/Android ⼯程師 • 建議先學會 iOS/Android 其中⼀種,再來學 Flutter
怎樣學 Flutter
怎樣學 Flutter • 建置環境,安裝 IDE 與 SDK • 學習 Dart
程式語⾔與慣例 • 先動⼿寫⼀個 Flutter App 上⼿ • 熟悉 Flutter Widget • 熟悉 Flutter 的重要 Pattern 與更新機制 • 練習寫 Dart Package • 練習寫 Flutter Plugin
安裝 IDE 與 SDK • IDE • Android Studio •
IntelliJ IDEA • Visual Studio Code • Flutter SDK https://flutter.dev/docs/get-started/install • Dart SDK https://dart.dev/get-dart
學習 Dart 語⾔ • Learn X in Y minutes https://learnxinyminutes.com/docs/
dart/ • Dart Pad https://dartpad.dartlang.org • Exercism https://exercism.io • Effective Dart https://dart.dev/guides/language/effective- dart
動⼿寫第⼀個 Flutter • Flutter 的 New Project 就已經是⼀個簡單會動的程式了 • 官網教學
https://flutter.dev/docs/get-started/codelab • 《Flutter 實戰》第⼆章 https://book.flutterchina.club/ chapter2/
Flutter Widgets • Flutter 的 Widget 的數量非常多,考驗記憶⼒ • https://flutter.dev/docs/reference/widgets •
https://flutter.dev/docs/development/ui/widgets • https://api.flutter.dev/flutter/widgets/widgets-library.html • 《實戰 Flutter》三~⼗章
Flutter 的基本 Widget • Text、Image、Scaffold • Column、Row、Stack、List、Stack • Custom ScrollView
• Container、Sized、Expanded、Flexible • Stream Builder、Future Builder
Flutter 的 Pattern • 先把你過去學過的 Mobile 開發忘了:MVC、 Singleton、Delegation… • 即使是
Dart 程式,與 Flutter 程式的典範不太⼀樣 • 在 Flutter 的應⽤程式中, 所有物件都在⼀顆樹裡頭
Pattern? • Pattern 就是物件之間的關係 • 不該有關係的就不要有關係 • Facade:某個 Class 包含了多個⼦系統,其他⼈都經過這個
介⾯,避免外部與⼦系統發⽣關係 • Singleton:某個 Class 只有⼀個 instance,其他⼈都 access 這個 instance 的多對⼀關係 • Delegate:某個 Class ⾃⼰不做事,交給另外⼀個物件的⼀對 ⼀關係
Flutter Pattern • Flutter 當中 Widget 只有三種關係: • 另⼀個 Widget
在當前的 Widget 上⽅ • 另⼀個 Widget 在當前的 Widget 下⽅ • 另⼀個 Widget 在當前 Widget 之外的另⼀顆樹裡頭 • 由上層節點決定下層節點的狀態
往上尋找節點 • “of” • 往上尋找最接近且符合某個型態的節點 • Navigator.of(context).push(route) • Theme.of(context).primaryColor •
MediaQuery.of(context).padding
往下控制節點 • ⽬前 Widget 的 build method 會產⽣下⽅的 Widget •
已經建立好了 Widget,想要知道內部的狀態,需要在建立 Widget 時 inject ⼀把 Key 進去 • 已經建立好了 Widget,想要改變下⽅ Widget 的狀態,除 了可以整個重 build,某些 Widget 也提供 controller
另⼀個 Widget 在另⼀顆樹裡頭 • 先往上,再往下 • ⽤ “of” 尋找同時位在這兩個 Widget
共同上⽅的 Widget • 由這個上⽅的 Widget 往下更新 • 越重要的資料(如登入狀態),放在越上⽅
狀態管理 • UI = f(State) • Provider • Bloc (Business
Logic Component)
Dart Package 與 Flutter Plugin 開發 • stagehand • dart
pub 發佈
疑難雜症
Android X • Android 上使⽤ Gradle 管理 plugin 中的 native
部分 • 有些 plugin ⽤了 Android X,有些還在⽤ Android Support Library,然後就編不起來… • 發信請作者更新 plugin,或是⾃⼰ fork
iOS 的 OpenGL • Flutter 在 iOS 上使⽤ OpenGL 繪製
UI • iOS 不會在背景更新 OpenGL 畫⾯,但是你的 App 可能會 在背景執⾏ • 如果你的 App 可能會在背景,就要在 native code 中保存狀 態,然後在 app 回到前景時更新 Flutter 畫⾯ • 混⽤ OpenGL 的 View,如 MapView,有時也會有靈異現象 • OpenGL 可能在⼀些很詭異的狀況下 Crash
某些 plugin 跟你預期的⾏為不同 • 有些 plugin 做了跟你預期不同的事情 • Local Notification
plugin 與 Firebase Messaging plugin 打 架,某些訊息繪被 Local Notification plugin 攔走 • iOS 的 AppDelegate 事件不⼀定會交給哪個 plugin 處理 • 在 iOS 上,有時候要動⽤ Method Swizzling…
Flutter 的軟體⼯程
Flutter 的測試 • Dart 元件的單元測試 • Flutter Widget 的 Widget
測試 • 都有整合進 IDE 中 • 提供 Mockito 協助 Mock 資料
Widget Test • 所有的 native plugin 都得 mock 掉 •
Flutter Widget test 單獨跑在 Dart VM 上,不提供 plugin 所需要的平台功能 • method channel 除了提供 setMethodCallHandler,也提供 setMockMethodCallHandler
CI/CD • BitRise 對 Flutter ⽀援非常好 • GitHub Actions/Travis 也適合⽤在
Dart Package 的 CI • 我們在內部使⽤ GitLab CI/Jenkins • Android 使⽤ Docker Image 編譯 • iOS 使⽤ Mac Mini 編譯
Flutter 與 Native • Flutter 也可以透過 Plugin呼叫 iOS/Android 的 Native
Code • Flutter -> Native:Method Channel • Native -> Flutter:Event Channel • 將 Native 畫⾯蓋在 Flutter 上:Platform View
Recap • 什麼是 Flutter?Flutter 如何加速產品開發? • 你是否應該導入 Flutter? • 新⼿怎樣學
Flutter? • 你可能會遇到的疑難雜症 • Flutter 的軟體⼯程
學習資源 • Flutter 官網 https://flutter.dev/ • Flutter 中⽂網 https://flutterchina.club/ •
Flutter 官⽅ YouTube 頻道https://www.youtube.com/ channel/UCwXdFgeE9KYzlDdR7TG9cMw • ⼀堆 Twitter 帳號
KKBOX OpenAPI SDK for Dart https://pub.dev/packages/kkbox_openapi