概要
どうも、@daiki1003です!先日開催されていた、CA.flutterに参加しました!


そこで発表されていた内容を軽くまとめてみたので参考になると幸いです。
(最近、Flutterの勉強会に参加するといつメンになって来ているw)
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名の方、本当にありがとうございました!Flutter
3年くらいやってますが、まだまだ知らないことが多いなぁと刺激になった1日でした!!
Twitterフォローお願いします
「次回以降も記事を読んでみたい!」「この辺分からなかったから質問したい!」
そんな時は、是非Twitter (@daiki1003)やInstagram (@ashdik_flutter)のフォローお願いします♪
Twitterコミュニティ参加お願いします
Twitterコミュニティ「Flutter lovers」を開設しました!参加お待ちしております😁
☕️ Buy me a coffee
また、記事がとても役に立ったと思う人はコーヒーを奢っていただけると非常に嬉しいです!
コメント