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
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
190
Vue.jsでiOSアプリを作る方法
hal_spidernight
0
120
Simple組み合わせ村から大都会Railsにやってきた俺は / Coming to Rails from the Simple
moznion
3
3.5k
Fixstars高速化コンテスト2024準優勝解法
eijirou
0
200
オニオンアーキテクチャを使って、 Unityと.NETでコードを共有する
soi013
0
380
shadcn/uiを使ってReactでの開発を加速させよう!
lef237
0
370
PHPで作るWebSocketサーバー ~リアクティブなアプリケーションを知るために~ / WebSocket Server in PHP - To know reactive applications
seike460
PRO
2
800
チームの立て直し施策をGoogleの 『効果的なチーム』と見比べてみた
maroon8021
0
200
CNCF Project の作者が考えている OSS の運営
utam0k
5
590
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
3.7k
サーバーゆる勉強会 DBMS の仕組み編
kj455
1
340
月刊 競技プログラミングをお仕事に役立てるには
terryu16
1
1.2k
Featured
See All Featured
Done Done
chrislema
182
16k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.2k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Into the Great Unknown - MozCon
thekraken
34
1.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Optimising Largest Contentful Paint
csswizardry
33
3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
6
210
Designing for Performance
lara
604
68k
How STYLIGHT went responsive
nonsquared
96
5.3k
Bash Introduction
62gerente
610
210k
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