仕組みを知れば怖くない！ Flutter入門

by najeira

Slide 1

Slide 1 text

仕組みを知れば怖くない！ Flutter 入門 Flutter Meetup Tokyo 2018/04/18 @najeira 仕組みを知れば怖くない！Flutter 入門 1

Slide 2

Slide 2 text

CARTUNE Flutter でアプリ作りました仕組みを知れば怖くない！Flutter 入門 2

Slide 3

Slide 3 text

対象 Flutter に興味があるが使えるものなのかどうか、漠然と不安がある他のSDK と比べて、何が違うかわからない仕組みを知れば怖くない！Flutter 入門 3

Slide 4

Slide 4 text

目的 Flutter がクロスプラットフォームを実現している仕組みを知ることで不安を解消するできること（得意なこと）できないこと（苦手なこと）を知る仕組みを知れば怖くない！Flutter 入門 4

Slide 5

Slide 5 text

フルスタック仕組みを知れば怖くない！Flutter 入門 5

Slide 6

Slide 6 text

フルスタックレイアウトを計算して画面に描画するところまで Flutter がすべて行う仕組みを知れば怖くない！Flutter 入門 6

Slide 7

Slide 7 text

階層仕組みを知れば怖くない！Flutter 入門 7

Slide 8

Slide 8 text

ほとんどの場合は Material / Cupertino / Widgets を使うここが Reactive framework になっている ※ あとは Animation 仕組みを知れば怖くない！Flutter 入門 8

Slide 9

Slide 9 text

Rendering / Painting など UI の基本的な実装上位の Material / Cupertino / Widgets が使うアプリから直接使うことは、まずない仕組みを知れば怖くない！Flutter 入門 9

Slide 10

Slide 10 text

Flutter React Native 仕組みを知れば怖くない！Flutter 入門 10

Slide 11

Slide 11 text

フルスタックプラットフォームのUI を使っていない（ラップではない）仕組みを知れば怖くない！Flutter 入門 11

Slide 12

Slide 12 text

フルスタック自前のUI なので UI に関してプラットフォーム間の差異が小さいプラットフォーム標準と異なる場合があるプラットフォーム標準のUI と混在させにくい仕組みを知れば怖くない！Flutter 入門 12

Slide 13

Slide 13 text

プラットフォーム間の差異 UI は基本的に同じになるプラットフォーム標準に寄せて、 Flutter 内部で変えている箇所はある AppBar の中央寄せ(iOS), 左寄せ(Android), 矢印デフォルトの画面遷移のアニメーション iOS 風UI の Cupertino パッケージプラットフォームごとにUI 調整が要らないので楽仕組みを知れば怖くない！Flutter 入門 13

Slide 14

Slide 14 text

ネイティブとの差異 Android では気にならないもともとOS バージョンで大きく違う最近はマテリアル・デザインマテリアル・デザインの準拠度は高い仕組みを知れば怖くない！Flutter 入門 14

Slide 15

Slide 15 text

ネイティブとの差異 iOS の標準UI とは違いもあるスクロールの加減速計算もFlutter 自前なので微妙な違いを感じる人もいるかも？ Cupertino パッケージにまだ無いものもある随時追加されている仕組みを知れば怖くない！Flutter 入門 15

Slide 16

Slide 16 text

ネイティブとの差異基本的に Android/iOS とも同じUI ということをやろうとするとわざわざ別のUI を実装するコストがかかる Android はマテリアルで、iOS は標準UI でプラットフォームごとに違う見た目にしよう…… “ “ 仕組みを知れば怖くない！Flutter 入門 16

Slide 17

Slide 17 text

ネイティブとの差異 ※ 個人的なおすすめ基本はマテリアル・デザインで作る要所で（少しだけ）iOS 風を出す下タブナビゲーションバーのボタンをテキストにする画面遷移のアニメーション一覧のもっと見る矢印仕組みを知れば怖くない！Flutter 入門 17

Slide 18

Slide 18 text

ネイティブとの混在レイアウト、描画などFlutter がやっている Flutter はネイティブのUI のことを知らないので 1 画面内で混在させるのは難しいネイティブの別画面との遷移は問題ない仕組みを知れば怖くない！Flutter 入門 18

Slide 19

Slide 19 text

utter/engine 仕組みを知れば怖くない！Flutter 入門 19

Slide 20

Slide 20 text

utter/engine Flutter のUI フレームワーク部分はDart で実装各プラットフォームで動作させるために C++, Java, ObjC で書かれた utter/engine がある ※ 別リポジトリ、もちろんOSS 仕組みを知れば怖くない！Flutter 入門 20

Slide 21

Slide 21 text

Android とのGlue FlutterApplication (extends Application) FlutterActivity (extends Activity) FlutterView (extends SurfaceView) 単一のActivity がありそこに画面いっぱいのSuerfaceView が載っている Flutter は、SuerfaceView に描画している仕組みを知れば怖くない！Flutter 入門 21

Slide 22

Slide 22 text

iOS とのGlue FlutterAppDelegate (extends UIApplicationDelegate) FlutterViewController (extends UIViewController) FlutterView (extends UIView) 単一のFlutterViewController がありそこに画面いっぱいのUIView が載っている UIView にはCAEAGLLayer が載っている Flutter は、CAEAGLLayer に描画している仕組みを知れば怖くない！Flutter 入門 22

Slide 23

Slide 23 text

Flutter も Activity / UIViewController の一種別の Activity / UIViewController を表示同じ画面でネイティブのUI を重ねるということが可能あとはネイティブの通常の開発と同じ ※UI を重ねるのは最終手段仕組みを知れば怖くない！Flutter 入門 23

Slide 24

Slide 24 text

プラグイン Flutter アプリから Android / iOS のコードを呼び出す仕組みを知れば怖くない！Flutter 入門 24

Slide 25

Slide 25 text

プラグイン UI 以外の、プラットフォーム固有の機能を使いたい場合はプラグインの仕組みを使う SharedPreference, KeyChain device_info (OS バージョンの取得など) 仕組みを知れば怖くない！Flutter 入門 25

Slide 26

Slide 26 text

プラグイン RPC 的に処理を呼び出す（同じプロセス内ではあるが）多少のオーバーヘッドがあるのでヘビーに呼び出すのは避ける大きいタスクに切り出して呼び出す仕組みを知れば怖くない！Flutter 入門 26

Slide 27

Slide 27 text

余談仕組みを知れば怖くない！Flutter 入門 27

Slide 28

Slide 28 text

※ 個人の感想です最初にFlutter を調べてみたときに「ブラウザの別実装」なのではないか、と思ったブラウザではHTML, CSS でUI を作っていたのを最初からUI を作ることを念頭に置いて実装したのが Flutter 仕組みを知れば怖くない！Flutter 入門 28

Slide 29

Slide 29 text

ブラウザ HTML のDOM ツリーをレンダリングする HTML はプラットフォームに依存しないのでクロスプラットフォームで動作する Flutter Widgets ツリーをレンダリングする Widgets は自前なのでクロスプラットフォームで動作する仕組みを知れば怖くない！Flutter 入門 29

Slide 30

Slide 30 text

utter/engine （Flutter の下回りのC++ 部分） Copyright にChromium Authors やApple Inc があったり namespace blink だったり仕組みを知れば怖くない！Flutter 入門 30

Slide 31

Slide 31 text

まとめプラットフォーム間の差異が小さいネイティブとの差異は少しあるネイティブUI と混在しにくい画面が違えば大丈夫プラグイン機構でネイティブ側の実装を呼べる仕組みを知れば怖くない！Flutter 入門 31