Flutter Recap from I/O 2019 + α #ABC2019s
ABC 2019 Springでのトークの書き起こしです。
自己紹介
Androidアプリを作ったり、技術支援を行ったりしている。Androidアプリ本の執筆も。
Google I/O 2019
Developer KeynoteでFlutterの話が出てきた。Flutter for Web発表。
サンドボックス(デモなどが展示されている)では、Flutterのアプリが展示されているところも。アニメーション豊かなものもあった。Chromeでキーボードを使うようなものも。
I/OでFlutterという文字が入っていたのは5つのセッション。
マテリアルデザイン関連
1年前のI/Oでは、マテリアルデザインの問題点について話されていた。Googleのアプリじゃなくても、Googleっぽく見えてしまう。そこでマテリアルシーミングというものが発表された。独自のフラットデザインを実現できるようにするもの。とはいえいろんなライブラリは整ってなかったので大変だった。今年のI/Oではテーマが増えた。ダークテーマ(暗いところでも見やすい、バッテリー消費を抑える)もFlutterでサポートされている。
ウィジェット
用意されているテーマをオーバーライドして、独自にカスタマイズすることができる。
リストビューで順番を入れ替えられたり、複雑な動きができるスライダー、検索ビューも楽に作れるようになってきた。
アクセシビリティ
目の不自由な方のために、音声で読み上げてくれる機能など。「30km/h」を、「30 kilometers per hour」と読んでくれるよう、セマンティックラベルに設定しておくと、そのように読んでくれる。画像に関してもラベルを付けておくことによって、それを読み上げてくれるようになる。
マルチプラットフォーム
いろんな大きさのデバイスに対応する。様々な画面レイアウトを用意して、それぞれに対して条件分岐することもできるが、面倒。
インタラクティブ(スマホ、PCなど、何らかの操作をして、それが画面に反映されるもの)⇔パッシブ(時計のように、届かないところで表示されているだけ)について考える。表示する文字のサイズをどれでも同じにすると辛い(スマホとテレビで同じフォントサイズにしてしまうなど)。パッシブなものであればフォントサイズを変更するなどの設定をすることでそれを解決できる。コードではパッシブかどうかを判定し、それによって条件分岐をするなど。
iOSに関して。iOSらしいデザインを作るのであれば、Cupertinoデザインを使う。コード状で条件分岐する。Flutterのメリットは1ソースで複数OSに対応できることなので、個人的にはおすすめしない。
マルチスクリーンサポート。「画面の横幅がこれ以上だったら〇〇」のような条件を書く。パソコン用に、バックキー押されたらダイアログを閉じる、マウスが上に乗ったらホバーかけるなどもできる。
Flutter for Webはすでに試せる。が、GitHubの手順通りにやるとひっかかる。スライドに注意点を書いているので、参考にすると良い。
Flutter 1.5
- マテリアル、クパティーノのアップデート
- Flutter for Web
- Dart2.3
Dart 2.3
Spread Operator、Null-Aware Spread Operator、Collection if、Collection forなど
In-App Purchasesサポート
売っているもののアイテム一覧、ユーザが以前購入したものの一覧などをロードできたり。
Codelabs
Flutterもある。12個のコンテンツが提供されている。多いので、やるならこれ↓(あとで画像挿入)。