Google I/O 2019で直接確認した、 FlutterでのAndroid/iOSのUI出し分け方法 と今後のUI検討指針 Yuma Tanaka Mobile Application Engineer at MTI Ltd.（Video Market Corp.）

2019年7月にFlutterアプリを公開予定（iOS版）

Google I/O 2019 【主な参加目的】 ● Office HoursでGoogle社員の方に Flutterに関する質問をさせて頂き、業 務で扱っているアプリの実装に活かす ● Flutterに関する最新情報の取得

UI出し分け方法

UI出し分けを実装する機会はあまりなさそう ● UI出し分け ○ Android → Material Components Widgetsで実装 ○ iOS → Cupertino Widgetsで実装 ● 考えられる実装の動機（稀では？） ○ Flutterアプリで、Google PlayやApp StoreでのFeaturedを本気で狙う ○ 個人的な学習

ソースコード例（一部） https://api.dartlang.org/stable/2.3.0/dart-io/Platform-class.html

これまで実装してきて感じた事 ● 厳密に、Widget毎にプラットフォーム判別を行 い、出し分けを実装するのは大変、ソースコー ドも長くなる ● Cupertino Widgetsと比較してMaterial Components Widgetsが豊富 ● 同じ用途のWidgetでも、Cupertino Widgets よりMaterial Components Widgetsの方が、 機能が豊富で実装しやすい印象

Office Hoursで質問 【質問】 Widget毎にプラットフォーム判別を行ってUI出し 分けを行うのが大変である。何か簡単にできる方 法はないか。 【回答】 現時点でない。ダイアログ等、アプリ構成の一部だ け判別して出し分けを行い、基本的には判別せず 共通Widgetを使用する方針はどうか。 Brett Morgan Developer Relations Engineer, Dart and Flutter at Google https://events.google.com/io/schedule/events/

UI検討指針

Flutter for Web: Technical Preview announced at Google I/O 2019

UI検討指針 ・Mobile Platform ↓ ・Multi Platform https://developers.googleblog.com/2019/05/Flutter-io19.html

Office Hoursで質問 【質問】 Flutterでマルチプラットフォーム化が進んでいる。 Android/iOSだけで見てもナビゲーションの文化 が異なったりするが、何を指針にして実装していく べきか。 【回答】 プラットフォーム側の提示するデザインガイドライ ンに拘りすぎない。ユーザに一番大切にして欲し い行動を各自・各社考えた上で、サービスに反映 していくべき。 Brett Morgan Developer Relations Engineer, Dart and Flutter at Google https://events.google.com/io/schedule/events/

Summary ● Flutter ○ Google I/O 2019での注目度は高いと感じた。 ○ プラットフォーム毎に UI出し分けを実装できるが、何か一発で完全に実現する方法は現時点で存在しない。厳密にやると Widget毎に定義する必要があり大変。 ○ Material Components Widgetが豊富で実装しやすい為、特別な理由のない限り Materialベースでの実装を推奨。 ○ マルチプラットフォーム化が進んでいるが、ユーザにどのような行動をして欲しいのか熟考した上で、サービスに反映させていく べき。 ● Other ○ Google I/Oに参加するなら、App Review や Office Hoursにも行く事を推奨。 ○ Office Hoursでは他にも入手できた情報があるので、興味のある方は別途。

References ● Google I/O Schedule https://events.google.com/io/schedule/events/ ● Dart > dart:io > Platform class https://api.dartlang.org/stable/2.3.0/dart-io/Platform-class.html ● Flutter: a Portable UI Framework for Mobile, Web, Embedded, and Desktop https://developers.googleblog.com/2019/05/Flutter-io19.html

No content