Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
仕組みを知れば怖くない! Flutter入門
Search
najeira
April 18, 2018
Technology
16
7.8k
仕組みを知れば怖くない! Flutter入門
najeira
April 18, 2018
Tweet
Share
More Decks by najeira
See All by najeira
Flutter with Platform
najeira
4
1.3k
Google I/O 2019 Extended Tokyo - Flutter
najeira
1
170
Flutter APP DOJO 2019-04
najeira
1
180
Flutterとの1年
najeira
4
1.4k
Flutter List View 概要
najeira
0
1.1k
Flutter / Google I/O 2018 報告会 信州
najeira
0
280
FlutterでAndroid/iOS両対応のアプリ開発
najeira
0
4.4k
Google I/O 2017 報告会 Firebase/Cloud
najeira
1
160
Google I/O 2017 報告会 Flutter/Dart
najeira
1
300
Other Decks in Technology
See All in Technology
Data-centric AI入門第6章:Data-centric AIの実践例
x_ttyszk
1
370
10分で紹介するAmazon Bedrock利用時のセキュリティ対策 / 10-minutes introduction to security measures when using Amazon Bedrock
hideakiaoyagi
0
170
リアルタイム分析データベースで実現する SQLベースのオブザーバビリティ
mikimatsumoto
0
950
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
150
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
0
120
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
580
Kubernetes x k6 で負荷試験基盤を開発して 負荷試験を民主化した話 / Kubernetes x k6
sansan_randd
2
730
株式会社EventHub・エンジニア採用資料
eventhub
0
4.2k
Postmanを使いこなす!2025年ぜひとも押さえておきたいPostmanの10の機能
nagix
2
120
家電アプリ共通PF "Linova" のAPI利用とPostman活用事例ご紹介
yukiogawa
0
130
『衛星データ利用の方々にとって近いようで触れる機会のなさそうな小話 ~ 衛星搭載ソフトウェアと衛星運用ソフトウェア (実物) を動かしながらわいわいする編 ~』 @日本衛星データコミニティ勉強会
meltingrabbit
0
120
APIファーストで実現する運用性の高い IoT プラットフォーム: SORACOMのアプローチ
soracom
PRO
0
240
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
What's in a price? How to price your products and services
michaelherold
244
12k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
Automating Front-end Workflow
addyosmani
1367
200k
Designing for Performance
lara
604
68k
The Language of Interfaces
destraynor
156
24k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Transcript
仕組みを知れば怖くない! Flutter 入門 Flutter Meetup Tokyo 2018/04/18 @najeira 仕組みを知れば怖くない!Flutter 入門
1
CARTUNE Flutter でアプリ作りました 仕組みを知れば怖くない!Flutter 入門 2
対象 Flutter に興味があるが 使えるものなのかどうか、 漠然と不安がある 他のSDK と比べて、 何が違うかわからない 仕組みを知れば怖くない!Flutter 入門
3
目的 Flutter がクロスプラットフォー ムを 実現している仕組みを知ることで 不安を解消する できること( 得意なこと) できないこと( 苦手なこと)
を知る 仕組みを知れば怖くない!Flutter 入門 4
フルスタック 仕組みを知れば怖くない!Flutter 入門 5
フルスタック レイアウトを計算して 画面に描画するところまで Flutter がすべて行う 仕組みを知れば怖くない!Flutter 入門 6
階層 仕組みを知れば怖くない!Flutter 入門 7
ほとんどの場合は Material / Cupertino / Widgets を使う ここが Reactive framework
になっている ※ あとは Animation 仕組みを知れば怖くない!Flutter 入門 8
Rendering / Painting など UI の基本的な実装 上位の Material / Cupertino
/ Widgets が使う アプリから直接使うことは、 まずない 仕組みを知れば怖くない!Flutter 入門 9
Flutter React Native 仕組みを知れば怖くない!Flutter 入門 10
フルスタック プラットフォー ムのUI を使っていない ( ラップではない) 仕組みを知れば怖くない!Flutter 入門 11
フルスタック 自前のUI なので UI に関してプラットフォー ム間の差異が小さい プラットフォー ム標準と異なる場合がある プラットフォー ム標準のUI
と混在させにくい 仕組みを知れば怖くない!Flutter 入門 12
プラットフォー ム間の差異 UI は基本的に同じになる プラットフォー ム標準に寄せて、 Flutter 内部で変えている箇所はある AppBar の中央寄せ(iOS),
左寄せ(Android), 矢印 デフォルトの画面遷移のアニメー ション iOS 風UI の Cupertino パッケー ジ プラットフォー ムごとにUI 調整が要らないので楽 仕組みを知れば怖くない!Flutter 入門 13
ネイティブとの差異 Android では気にならない もともとOS バー ジョンで大きく違う 最近はマテリアル・ デザイン マテリアル・ デザインの準拠度は高い
仕組みを知れば怖くない!Flutter 入門 14
ネイティブとの差異 iOS の標準UI とは違いもある スクロー ルの加減速 計算もFlutter 自前なので微妙な違いを感じる人も いるかも? Cupertino
パッケー ジにまだ無いものもある 随時追加されている 仕組みを知れば怖くない!Flutter 入門 15
ネイティブとの差異 基本的に Android/iOS とも同じUI ということをやろうとすると わざわざ別のUI を実装するコストがかかる Android はマテリアルで、iOS は標準UI
で プラットフォー ムごとに違う見た目にしよう…… “ “ 仕組みを知れば怖くない!Flutter 入門 16
ネイティブとの差異 ※ 個人的なおすすめ 基本はマテリアル・ デザインで作る 要所で( 少しだけ)iOS 風を出す 下タブ ナビゲー
ションバー のボタンをテキストにする 画面遷移のアニメー ション 一覧のもっと見る矢印 仕組みを知れば怖くない!Flutter 入門 17
ネイティブとの混在 レイアウト、 描画などFlutter がやっている Flutter はネイティブのUI のことを知らないので 1 画面内で混在させるのは難しい ネイティブの別画面との遷移は問題ない
仕組みを知れば怖くない!Flutter 入門 18
utter/engine 仕組みを知れば怖くない!Flutter 入門 19
utter/engine Flutter のUI フレー ムワー ク部分はDart で実装 各プラットフォー ムで動作させるために C++,
Java, ObjC で書かれた utter/engine がある ※ 別リポジトリ、 もちろんOSS 仕組みを知れば怖くない!Flutter 入門 20
Android とのGlue FlutterApplication (extends Application) FlutterActivity (extends Activity) FlutterView (extends
SurfaceView) 単一のActivity があり そこに画面いっぱいのSuerfaceView が載っている Flutter は、SuerfaceView に描画している 仕組みを知れば怖くない!Flutter 入門 21
iOS とのGlue FlutterAppDelegate (extends UIApplicationDelegate) FlutterViewController (extends UIViewController) FlutterView (extends
UIView) 単一のFlutterViewController があり そこに画面いっぱいのUIView が載っている UIView にはCAEAGLLayer が載っている Flutter は、CAEAGLLayer に描画している 仕組みを知れば怖くない!Flutter 入門 22
Flutter も Activity / UIViewController の一種 別の Activity / UIViewController
を表示 同じ画面でネイティブのUI を重ねる ということが可能 あとはネイティブの通常の開発と同じ ※UI を重ねるのは最終手段 仕組みを知れば怖くない!Flutter 入門 23
プラグイン Flutter アプリから Android / iOS のコー ドを呼び出す 仕組みを知れば怖くない!Flutter 入門
24
プラグイン UI 以外の、 プラットフォー ム固有の機能を使いたい場合 はプラグインの仕組みを使う SharedPreference, KeyChain device_info (OS
バー ジョンの取得など) 仕組みを知れば怖くない!Flutter 入門 25
プラグイン RPC 的に処理を呼び出す ( 同じプロセス内ではあるが) 多少のオー バー ヘッドがあるので ヘビー に呼び出すのは避ける
大きいタスクに切り出して呼び出す 仕組みを知れば怖くない!Flutter 入門 26
余談 仕組みを知れば怖くない!Flutter 入門 27
※ 個人の感想です 最初にFlutter を調べてみたときに 「 ブラウザの別実装」 なのではないか、 と思った ブラウザではHTML, CSS
でUI を作っていたのを 最初からUI を作ることを念頭に置いて実装したのが Flutter 仕組みを知れば怖くない!Flutter 入門 28
ブラウザ HTML のDOM ツリー をレンダリングする HTML はプラットフォー ムに依存しないので クロスプラットフォー ムで動作する
Flutter Widgets ツリー をレンダリングする Widgets は自前なので クロスプラットフォー ムで動作する 仕組みを知れば怖くない!Flutter 入門 29
utter/engine (Flutter の下回りのC++ 部分) Copyright にChromium Authors やApple Inc があったり
namespace blink だったり 仕組みを知れば怖くない!Flutter 入門 30
まとめ プラットフォー ム間の差異が小さい ネイティブとの差異は少しある ネイティブUI と混在しにくい 画面が違えば大丈夫 プラグイン機構でネイティブ側の実装を呼べる 仕組みを知れば怖くない!Flutter 入門
31