概要
どうも、@daiki1003です！先日開催されていた、CA.flutterに参加しました！
そこで発表されていた内容を軽くまとめてみたので参考になると幸いです。
(最近、Flutterの勉強会に参加するといつメンになって来ているｗ)
GuardとDeep Linkを活用したナビゲーション管理
auto_routeの活用事例でした。
[auto_route | Flutter Package](https://pub.dev/packages/auto_route)
個人的には、 routingには基本的に以前書いた以下の記事の方法で困っていませんでした。
ですが、以下の点で非常に有用だなと思いました。
(逆に上記の方法ではこちらの問題を解決していません。)
・遷移の事前条件及びリダイレクト
・Deep Linkとの相性の良さ
・NavigatorObserverとの相性の良さ
遷移の事前条件及びリダイレクト
RouteGuardと言う機能があり、そちらを利用することで遷移する際の事前条件を指定することが出来ます。
ログインしていないとダメ、有料会員でないとダメ、などの判定に使えます。
もちろん、条件を満たさないユーザのリダイレクトも可能です。
Deep Linkとの相性の良さ
configメソッドに、Deep Link用の設定を指定することができます。
NavigatorObserverとの相性の良さ
やはり、メインの使い所としては画面ごとのログ送信とかでしょうか。
そして、NavigatorObserverを調べていてRouteObserverと言うのも知りました。
これも使えそうなのでちょっと今後ウォッチしていきたいと思います。
How To Improve Ui Quality And Performance
VRT (Visual Regression Test)とパフォーマンス改善の話でした。
この辺を連携して全PRのCIにて実現しているそうです。
対象端末
各OS毎に
・通常サイズ
・タブレット
・一番大きい
・一番小さい
端末で行っているとのこと。
textScaleFactor
OSの設定で文字サイズを大きく設定していた時にUIが崩れないかのテストもしているとのこと。
1、1.5を固定値で指定しているようです。
integration_testでパフォーマンス監視および改善
個人的にはかなり興味深かったセクションでした。
integration_test自体は動かしているものの、それ以上でも以下でもなくコストは結構かかるので
正直悩ましい存在でした。
ですが、パフォーマンスの監視に使えると言うのです。
調べてみたらこちらのページがありました。
buildにかかる時間や、平均CPU利用率、平均メモリ利用量などのメトリクスが取得出来る様でこれはかなり活用の幅が広がるなと感じました！
小売アプリのためのアクセシビリティ
Semanticsに関する話でした。
存在は知っていながら、全然対応出来ていないので正直耳が痛い話になるかと思いきや
あまり意識していなくても公式のウィジェットは内部でSemanticsを利用しているため大体大丈夫だよ、とのこと。
その上で、例題の画面を提示しつつtipsを何個も発表していただき非常に勉強になりました。
画像
・そのままだと「イメージ」と読み上げられてしまう
・CachedNetworkImageはSemanticsでラップする
・ImageウィジェットはsemanticsLabelを指定するだけでOK
1行でスタイルが異なるText
Row(
children: [
Text('aaa', Theme.of(context).textTheme.displayLarge),
Text('bbb', Theme.of(context).textTheme.displaySmall),
],
)
・別々に読み上げられてしまう
・MergeSemanticsを利用することで1行で読んでくれる
→でも都度ラップしなければいけない
・RichTextを利用する方が良い
アイコン付きのボタン
・アイコン部分が読み上げられてしまう
・ExcludeSemanticsでラップしてあげるとツリーから外される
時間表現
残り時間 00:01:24、と言う表記があった時に
・「残り時間ゼロゼロ時間ゼロイップンニジュウヨンビョウ」と読み上げられてしまう
・Text.semanticsLabelを渡してあげる
ListView
・childrenに渡したウィジェット全体で一つのsemantics treeが構成される
・SingleChildScrollView + Columnにすることで解決(パフォーマンスは無視できる場合のみ)
Snackbar
・そのままだと、出てきたことにすら気付いてくれないため自動で読み上げる必要がある
・ Semantics.liveRegionにtrueを設定する
タップ領域
・小さすぎるとUIを発見することができない
・最低でも40x40pxは確保する
その他レイアウトの工夫
Layout overflowを防ぐ
SizedBoxではなく、ConstrainedBoxで指定するとのこと。
僕もレイアウトのSizedBoxによる固定は出来る限り使いたくないです。
GridViewの高さを可変にする
GridViewマジでめんどくさいですよね…笑
flutter_layout_gridパッケージで実現しているそうです。
テキストを1行に収める
・Text.overflowにTextOverflow.ellipsis
・FittedBox.fitにBoxFit.scaleDown
・textScaleFactorの上限値を設定
登壇してくださった3名の方、本当にありがとうございました！Flutter3年くらいやってますが、まだまだ知らないことが多いなぁと刺激になった1日でした！！
Twitterフォローお願いします
「次回以降も記事を読んでみたい！」「この辺分からなかったから質問したい！」
そんな時は、是非Twitter (@daiki1003)やInstagram (@ashdik_flutter)のフォローお願いします♪
Twitterコミュニティ参加お願いします
Twitterコミュニティ「Flutter lovers」を開設しました！参加お待ちしております😁
☕️ Buy me a coffee
また、記事がとても役に立ったと思う人はコーヒーを奢っていただけると非常に嬉しいです！
@daiki1003
コメント