狠狠撸

給 iOS ?工程師的
Flutter 開發
zonble

zonble@gmail.com

Flutter
? https://?utter.io

? ?一個寄宿在?目前 iOS、Android 平台上的新平台

? 是設計給 Google 未來來作業系統 Fuchsia 的應?用程式開發層

? Dart VM + Skia Render 引擎

? 在 iOS/Android App 中包入 Flutter Framework 後，執?行行 Dart
code，同?一個 App 在不同平台可以 render 出相同的效果

? 可以與 ObjC/Swift/Java/Kotlin 橋接

? 重新發明 Flash？

?用 Flutter 可能有什什麼好處？
? 以?目前的執?行行效能與完成度來來看，似乎不能不管

? 如果同時需要開發 iOS/Android，可以?大量量共?用程式碼

? iOS/Android 上可以 Render 出?一樣的畫?面，設計師可以只
需要做?一套設計

? 現在就先投資未來來的 Google 作業系統，以及 Flutter 還可
能移植到 Windows/Mac/瀏覽器執?行行的可能

?用 Flutter 會犧牲什什麼
? 還不?支援?一些 iPhone 的特殊功能，如 3D Touch

? 不過你的 App 本來來也就沒在?支援 3D Touch

? 犧牲跟 macOS/tvOS/watchOS 共?用程式碼的機會

? 不過你本來來也沒在?支援

? 好的 Dart 語?言的?工程師不好找

? 不過反正你本來來也找不到好的 ObjC/Swift/Java/Kotlin ?工
程師

?用 Flutter 會犧牲什什麼
? 在 iOS 上由於?用的不是 UIKit 元件，看起來來會比較像
Google Photo 的感覺，?而不像「很 Apple」的 App

? 無法使?用 XCTest 測試

? 上線後，從 iOS 的 crash log 中看不出 Dart 程式的問題

? 專案會與 Firebase 變得更更緊密，因為現在供 Flutter 使?用的
BaaS、Analytics…都只有 Firebase 這個選擇

使?用 Flutter 的挑戰
? Flutter 無法使?用?一些平台專屬功能，?而可能需要寫與該平
台橋接的程式，所以現階段還是得懂?一定的 iOS/Android
開發

? 哪些部分?用 Flutter 寫，哪些寫在 iOS/Android 橋接端，非
常挑戰 App 架構的能?力力

安裝
? 先裝好 Xcode 以及 Android Studio

? 去 https://?utter.io/setup-macos/ 下載 zip 檔解壓

? 執?行行 ?utter doctor 看看少了了什什麼

? ?用 homebrew 裝 ideviceinstaller 以及 ios-deploy

? IDE 可?用 Android Studio 或 VSCode

iOS ?工程師如何進入？
? Dart 程式語?言

? Flutter 的設計典範

? Dart 與 Flutter 的套件/?生態系

Dart 程式語?言
? 這年年頭的 OO 語?言其實都差不多，但還是有少部分差異異

? Dart 除了了可以在 Flutter 執?行行以外，也可以編譯成 JS 在網
?頁使?用，也可以單獨在 Dart VM 執?行行

? 所以 Dart 可以寫單獨的 CLI 程式，在 server side 執?行行

? Dart 在網?頁上可以搭配 Angular 使?用…不過這年年頭好像寫
Angular 的?人比較少

單獨安裝 Dart
? ?用 homebrew 安裝 dart

? brew install dart

? 同時建議安裝 stagehand，Dart 的新專案產?生器

? pub global activate stagehand

開始新專案
Swift Package Manager
$swift package init

init 後可接 --type

empty|library|executable|
system-module

Dart
$stagehand [project type]

Project type 可接

? console-full

? package-simple

? server-shelf

? web-angular…

Dependency
iOS/Swift 開發
? 可使?用 SPM package 或是
Cocoapods

? Cocoapods 可在 https://
cocoapods.org/ 查詢

? SPM Package 的
Dependency 設定寫在
Package.swift 中

? 使?用 swift package update
更更新
Dart
? 使?用 pub

? 可在 https://
pub.dartlang.org/ 查詢

? Dependency 設定寫在
pubspec.yaml 中

? ?用 pub get 指令更更新

變數、常數
Swift
var -> 可以變動

let -> 不可變動
Dart
var -> 可以變動

?nal -> 不可變動

const -> 全域的常數

Class
Swift
class Sample {

var x:Int

init (x: Int) {

self.x = x?
}

func someMethod() {

self.hi()?
}?
}

var sample = Sample(x: 1)
Dart
class Sample {

int x = 0;

Sample(this.x) {?
}

someMethod() {

this.hi();?
}?
}

Sample sample = new
Sample(1);

字串串格式
Swift Package Manager
var x = “1 + 1 = ( 1 + 1)”

print(x)
Dart
String x = “1 + 1 = ${ 1 + 1}”;

print(x);

匿名函式
Swift
{ x in …

}

或

{ $0.doSomething() }
Dart
(int x) {

…?
}

或寫成單?行行

(x) => doSomething(x);

匿名函式
Swift
class MyClass {

var f: ((Int)->Int)?

}

var x = MyClass()

x.f = { $0 + 1 }

print("(x.f!(2))"

// Swift 也可以?用 typealias
Dart
// ?一定要?用 typedef

typedef int Call(int);

class MyClass {

Call f;

}

main() {

var x = new MyClass();

x.f = (i) => i + 1;

print(x.f(2));

}

Nullability
Swift
必須要將任何變數的形態設定
為 optional，才可以將變數指
向 nil。
Dart
可以將任意變數指向 null，任
何變數?一開始不給予值也是
null，但是可以使?用與 Swift
相同的 ?? 語法判斷是否是
null。

Callback
Swift
? URLSessionTask 使?用
Closure 處理理 callback

? 加裝 promise kit 等套件之
後，可以使?用 promise 語
法
Dart
? import ‘dart/async’;

? 使?用 Future 物件

? 可使?用 Promise 語法或是
async/await

Delegate？
? 在 ObjC/Swift 中?大量量使?用 Delegate Pattern

? 在 Dart 中改?用 Stream Controller

? Stream Controller 可以?用來來發送事件，Listener 則監聽從
Stream Controller 發送的事件

Stream Controller in Dart
import 'dart:async';

class MyClass {

StreamController controller = new StreamController.broadcast();

Stream get didSomething = controller.stream;

someMethod() {

this.controller.add(‘Test’);?
}?
}

MyClass obj = new MyClass();

obj.didSomething.listen( (String s) {

print(s);

});

Dart 也有叫做 Delegate 的東?西
? 不是每個叫做 Delegate 的東?西都是同樣意思

? ObjC/Swift 的 Delegate 通常?用在 Model 或 View 發?生改變
的時候，?用來來通知 Controller，也就是 Controller 是 Model
或 View 的 Delegate

? Dart 上也可以實作 ObjC/Swift 的 delegate，?用 abstract 代
替 protocol…但好像沒有?人這麼做

Dart 也有叫做 Delegate 的東?西
? Dart 的 Delegate 則指的是某個物件要使?用的規則，比較是
?一種純 Model 物件

? Dart 的 Delegate 很像 CocoaTouch 中 UICollectionView
與 UICollectionViewLayout 的關係

? 像是 Flutter 的 GirdView 的 delegate，就是 Grid 有幾?行行、
間距多少…等邏輯

Noti?cation Center？
? 有類似的東?西 https://github.com/stevenroose/dart-events

? 另外也有?人在 Flutter 上實作 redux https://
pub.dartlang.org/packages/?utter_redux

這個框架的設計概念念跟你
以前寫過的東?西差很多喔

Widget Model/Builder
? iOS 上畫?面主要由 View Controller/View 組成，View Controller
管理理?一個 view property，然後在上?面新增/移除 subview

? Flutter 的畫?面是由 Widget 組成，每個 Widget ?又都是?一個
builder，build 出這個 Widget 下有哪些內部的 Widget

? …其實 Flutter 裡頭什什麼都是 Widget

? Build 出的 Widget 再交給 Flutter 的 Renderer 給 render 成畫?面

? 某?方?面來來看，Flutter 的架構中比較沒有明確的 MVC 之分，?一個
Widget 像是扮演了了 Controller 與 View 的?角?色，但本質上
Widget 卻?又是 Model…

Widget Model/Builder
? Widget 在 Build 出底下的 Widget 之後，就無法再改動，
要改變畫?面，就要再 Build ?一次，Build 出另外?一份 Widget

? ?一個 widget 有點像是 Web 開發的 Virtual DOM，但比較不
同的時，Flutter 的 widget model 沒有做 HTML Tag/CSS
分離，?而是 widget 本?身就帶有樣式的性質

? Widget 做的事情也超過 DOM Element，Layout/動畫/

對比 iOS 開發看 Widget
? iOS 上，每個 view 的重繪，是在對 UIView 呼叫
setNeedDisplay 之後，才會呼叫 UIView 的 drawRect: 或
是 CALayer 的 drawInContext: 重繪

? 更更新?一個 widget 似乎有點類似：對 Widget 的 State 呼叫
setState() 後，才會重新 build 出?一份 widget ，由這份
widget render 出新的畫?面

? 也有點像是在 Vue.js 裡頭對某個 component 呼叫
$nextTick()

Widget 有兩兩種
? Stateless Widget：Widget build 出來來之後就不會改變內部
widget，往往?用在最?大或最?小的元件。最?大如整個 App 的
框架（MaterialApp Class）最?小的元件如?文字框（Text
Class）

? Stateful Widget：會改變狀狀態的 widget，負責掌管?一個
State 屬性，在 State 中再負責 build 出 widget。?大多時間
我們會寫這類的 Widget。

App：第?一個 Widget
void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {

// This widget is the root of your application.

@override

Widget build(BuildContext context) {

return new MaterialApp(

title: ‘My App',

theme: new ThemeData(

primarySwatch: Colors.blue,

),

home: new HomePage(title: ‘Home Page’),

);

}

} // 然後我們就可以繼續寫 HomePage class

Widget 有兩兩種
? 在前?面的範例例中

? MyApp 是 Stateless Widget

? Home Page 是 Stateful Widget

Decorator 風格
? 在其他框架中的元件屬性，在 Flutter 中則往往設計成被另
外?一個 Widget 包裝起來來

? ?一堆?文字置中： Center -> Column -> [Text, Text]

? 圖形放在圓框裡：Box Decoration -> Image

給 iOS 工程師的 Flutter 開發

處理理觸控事件
? 有些元件本?身就有 onTap，可以傳入匿名函式或某個物件
的 method

? 所有的物件都可以被包在 GestureDetector 當中

Widget 不?一定是 UI Element

什什麼時候去呼叫 Web API？
? 可以使?用 Future Block

? 或是在 initState 的時候，呼叫 Web API call，在 Promise
結束的時候呼叫 setState() 更更新畫?面

? 如果要做?頁?面 retry 的話，後?面這種作法可能比較好

Widget 深度往往深得亂七八糟…

Scaffold
? ?一個 App 最常?用的框架

? AppBar -> 類似 iOS NavigationBar

? Drawer -> 漢堡選單

? Floating Action Button -> Material Design 的特殊 UI

? Bottom Navigation Bar -> 類似 iOS 的 TabBar

建構畫?面的流程
? 從 Home Page 建置 Sca?old

? 根據各種?行行為，更更換 Sca?old 中的 body

?一些眉眉?角?角
? ListView 與 Grid View 只能單個 Section，如果想要多
Section 的 ListView 或 GridView，要改?用
CustomScrollView

? CustomScrollView 的 children 得要?用 SliverListView 以及
SliverGridView，?而不是直接把 ListView 或 GridView 放進
去

Flutter Plug-in
? 有些跟平台有關的事情，Flutter 不直接?支援

? 可以?自?己撰寫與平台橋接的程式（Platform Channel）
https://?utter.io/platform-channels/

? 或是安裝已經有?人包好的 Flutter Plug-in

Open URL
? 在 iOS 上可以呼叫 UIApplication 的 openURL: 以及
canOpenURL:

? Flutter 上要安裝 url_launcher https://pub.dartlang.org/
packages/url_launcher

? 改寫 pubspec.yaml 然後?用 ?utter packages get 更更新
dependencies

學習資源
? Flutter 原廠?文件 https://?utter.io/docs/

? Coding with Flutter https://medium.com/coding-with-
?utter

? Google IO 2018 其實沒講什什麼東?西

狠狠撸

給 iOS 工程師的 Flutter 開發

Recommended

More Related Content

What's hot (20)

Similar to 給 iOS 工程師的 Flutter 開發 (20)

More from Weizhong Yang (20)

Recently uploaded (6)

給 iOS 工程師的 Flutter 開發