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でAndroid/iOS両対応のアプリ開発
Search
najeira
October 10, 2017
Programming
0
4.4k
FlutterでAndroid/iOS両対応のアプリ開発
FlutterでAndroid/iOS両対応のアプリ開発
najeira
October 10, 2017
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入門
najeira
16
7.8k
Google I/O 2017 報告会 Firebase/Cloud
najeira
1
160
Google I/O 2017 報告会 Flutter/Dart
najeira
1
300
Other Decks in Programming
See All in Programming
テストをしないQAエンジニアは何をしているか?
nealle
0
130
WebDriver BiDiとは何なのか
yotahada3
1
140
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
270
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
10
1.8k
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
770
Bedrock Agentsレスポンス解析によるAgentのOps
licux
2
720
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
370
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
890
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
100
GAEログのコスト削減
mot_techtalk
0
110
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
41
15k
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Why Our Code Smells
bkeepers
PRO
335
57k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
The Invisible Side of Design
smashingmag
299
50k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
RailsConf 2023
tenderlove
29
1k
Building Applications with DynamoDB
mza
93
6.2k
BBQ
matthewcrist
86
9.5k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
The Cult of Friendly URLs
andyhume
78
6.2k
Transcript
Flutter Android/iOS 両対応の アプリ開発 GDG DevFest 2017 Tokyo @najeira generated
by Marp 1
Target Flutter の概要を知りたい エンジニア デザイナー Flutter でAndroid/iOS 両対応のアプリ開発 2
Engineer/Developer モバイルアプリを作る エンジニア/ デベロッパー Flutter でAndroid/iOS 両対応のアプリ開発 3
Designer Flutter のUI は宣言的 new Row(children: <Widget>[ new Icon(Icons.thumb_up), new
Text('Welcome to Flutter!', style: const TextStyle( color: Colors.red, fontSize: 20.0, ), ), ]), レイアウト/ スタイルを編集しやすい Flutter でAndroid/iOS 両対応のアプリ開発 4
Other モバイルアプリを作るにあたり どのような選択肢があるか 知っておきたい人にも Flutter でAndroid/iOS 両対応のアプリ開発 5
Agenda 概要、 特徴 仕組み 機能、UI 事例 Flutter でAndroid/iOS 両対応のアプリ開発 6
Flutter Flutter でAndroid/iOS 両対応のアプリ開発 7
Flutter とは? 開発フレー ムワー ク、SDK モバイルアプリ 単一のコー ドベー ス Android、iOS、Fuchsia
Flutter でAndroid/iOS 両対応のアプリ開発 8
目指すもの 高い開発効率 高い実行パフォー マンス Flutter でAndroid/iOS 両対応のアプリ開発 9
対象 2D の「 アプリ」 ゲー ムを作るものではない Flutter でAndroid/iOS 両対応のアプリ開発 10
特徴 Dart language Reactive framework inspired by React 自前UI (Material
and iOS) オー プンソー ス on GitHub developed by Google and community Flutter でAndroid/iOS 両対応のアプリ開発 11
特徴 ネイティブのARM コー ドにコンパイル iOS: C/C++/Dart すべて Android: C/C++ すべて、Dart
の大半 2D GPU-accelerated APIs IntelliJ プラグイン & IDE デバッグ ホットリロー ド Flutter でAndroid/iOS 両対応のアプリ開発 12
注意点 まだアルファ版 自前UI なので、OEM UI と混在できない Flutter 画面とプラットフォー ム画面の往来は可能 Flutter
でAndroid/iOS 両対応のアプリ開発 13
クロスプラットフォー ム 他にもいろいろある React Native JavaScript & CSS, Facebook, ホットリロー
ド, Web のReact, OEM UI, JavaScript Runtime Xamarin C#, Microsoft, OEM UI & Xamarin.Forms, ネイティ ブコンパイル(iOS) & Mono VM (Android) などなど Flutter でAndroid/iOS 両対応のアプリ開発 14
Flutter UI Flutter でAndroid/iOS 両対応のアプリ開発 15
Hello, Flutter! void main() { runApp(new MaterialApp( home: new Scaffold(
appBar: new AppBar( title: const Text('DevFest 2017'), ), body: const Center(child: const Text( 'Hello, Flutter!', style: const TextStyle(fontSize: 48.0), )), ), )); } Flutter でAndroid/iOS 両対応のアプリ開発 16
多数のWidget よく使うもの Text, TextStyle, Icon, Theme, RaisedButton, FlatButton, Scaffold, AppBar,
ListView, GridView, ScrollView, ListTile, ListBody, Container, Row, Column, Stack, Padding, Expand, Image, BottomNavigationBar, TabBar, TabBarView, MaterialApp, Drawer, Card, AlertDialog, Color, EdgeInset, InkWell, GestureDetector, ... Widget だけで1000 近くある Flutter でAndroid/iOS 両対応のアプリ開発 17
Widget class YourPage extends StatelessWidget { @override Widget build(BuildContext context)
{ return new Scaffold( appBar: new AppBar(title: new Text('My App')), body: new Center(child: new Text('Hello!')), ); } } StatelessWidget, StatefullWidget をextends して 自分のWidget( 部品や画面) を作る Flutter でAndroid/iOS 両対応のアプリ開発 18
StatefullWidget class YourApp extends StatefullWidget { YourAppState createState() => new
YourAppState(); } class YourAppState extends State<YourApp> { int counter = 0; Widget build(BuildContext context) { return new RaisedButton( child: new Text('counter = $counter'), onPressed: () { setState(() { counter++; }); }, ); } } Flutter でAndroid/iOS 両対応のアプリ開発 19
build, setState build メソッドが返すWidget ツリー が描画される setState で状態を変えると、 再build される
Flutter は前回のbuild と今回のbuild の Widget ツリー の差分を再描画する Flutter でAndroid/iOS 両対応のアプリ開発 20
Flutter の機能 Flutter でAndroid/iOS 両対応のアプリ開発 21
ホットリロー ド Flutter でAndroid/iOS 両対応のアプリ開発 22
テスト unit Dart 標準の単体テスト用のパッケー ジ widget Widget に対してテストを行う 操作するための手段が提供されている integration
実際のアプリを起動してスクリプトから操作する Flutter でAndroid/iOS 両対応のアプリ開発 23
Widget テスト testWidgets('description', (WidgetTester tester) async { await tester.pumpWidget( ...
new FlatButton(...), ... ); expect( tester.getSize( find.byType(FlatButton)), equals(const Size(88.0, 36.0), ), ); } Flutter でAndroid/iOS 両対応のアプリ開発 24
Platform Channels プラットフォー ム側のAPI を呼び出すことも出来る ※ カメラ、 位置情報など Flutter でAndroid/iOS
両対応のアプリ開発 25
Flutter の仕組み Flutter でAndroid/iOS 両対応のアプリ開発 26
Stack from utter.io Flutter でAndroid/iOS 両対応のアプリ開発 27
Rendering Flutter App | Platform Native Code Widget Tree --
Renderer ---- | -------------------- Canvas React Native App | Platform JavaScript Virtual Widgets -- Bridge -- | -- OEM Widgets ------ Canvas Flutter でAndroid/iOS 両対応のアプリ開発 28
from Chromium Chromium からのコー ドが多数ある utter/engine には Copyright Chromium Authors
Apple Inc のファイルが多数ある ※HTML のDOM を表示するブラウザと Widget tree を表示するアプリの共通性 Flutter でAndroid/iOS 両対応のアプリ開発 29
Dart by Google 動的型付け Java に似ている 当初はブラウザにおける JavaScript の置き換えを狙っていた…… Google
のAdWords とAdSense の サー バ側はDart らしい Flutter ではDart コー ドをネイティブコンパイル Flutter でAndroid/iOS 両対応のアプリ開発 30
事例 Flutter でAndroid/iOS 両対応のアプリ開発 31
事例 まだ少ない Google (mobile sales tool app) Hamilton musical Newsvoice
CARTUNE Flutter でAndroid/iOS 両対応のアプリ開発 32
CARTUNE Flutter でAndroid/iOS 両対応のアプリ開発 33
CARTUNE Flutter でAndroid/iOS 両対応のアプリ開発 34
CARTUNE ※ アニメー ションGIF のため粗いですが、 実際はもっと綺麗です Flutter でAndroid/iOS 両対応のアプリ開発 35
まとめ・ 感想 Flutter でAndroid/iOS 両対応のアプリ開発 36
なぜ Flutter を選んだのか Dart の型チェックが期待できた IntelliJ のプラグインやデバッグ機能 Flutter でAndroid/iOS 両対応のアプリ開発
37
開発してみて いくつかバグには遭遇した テキスト入力で改行まわり プラットフォー ム側のテキスト入力画面を表示 クラッシュまわりはログをIssue 登録 修正してもらえたり、 調査中 機能の追加のPull-Request
を送ってマー ジされた Flutter でAndroid/iOS 両対応のアプリ開発 38
開発してみて UI まわりはFlutter 提供のものを組み合わせればOK プラットフォー ム側の機能との連携は実装が必要 プラグインは少ない StackOver ow で質問すると即回答
Google の人も見てくれている フレー ムワー クのソー スコー ドが公開されており Dart なので読めば分かる Flutter でAndroid/iOS 両対応のアプリ開発 39
向き不向き 新規のアプリ開発には有力な候補 本アプリを作ってもよし プロトタイプだけでもよし 既存アプリにハイブリッド的に組み込むのは 向かない( と思う) 作成済みUI を利用できないなど Flutter
でAndroid/iOS 両対応のアプリ開発 40
まとめ Flutter でAndroid/iOS 両対応のアプリ開発 41
Flutter モバイルアプリのSDK Android / iOS 両対応 高い開発効率( ホットリロー ド・IDE デバッグ)
アルファ版 Flutter でAndroid/iOS 両対応のアプリ開発 42