【Flutter】CA.flutterに参加しました!

Dart

概要

どうも、@daiki1003です!

先日開催されていた、CA.flutterに参加しました!

CA.flutter #1 (2023/11/14 19:00〜)
# イベントについて CA.flutter はサイバーエージェントグループ横断で Flutter に関する知見を共有し合う勉強会です。 サイバーエージェントでは、スピード感をもって品質の高い実装を行うために、少人数でアプリ開発を行うことを念頭に置きクロスプラットフォームフレームワークの導入を進めております。それぞれ...

そこで発表されていた内容を軽くまとめてみたので参考になると幸いです。
(最近、Flutterの勉強会に参加するといつメンになって来ているw)

GuardとDeep Linkを活用したナビゲーション管理

auto_routeの活用事例でした。

[auto_route | Flutter Package](https://pub.dev/packages/auto_route)

個人的には、 routingには基本的に以前書いた以下の記事の方法で困っていませんでした。

【Flutter】もうnamedRouteは使わない!僕が全力で勧めたいルーティング方法をサンプル付きで解説してみた
皆さん、ページ間の遷移はどんな方式でやっていますか? Navigator2.0ですか? ...すごい、僕に教えてください🙇‍♂️笑 え、まだpushNamedを使っている? 僕にもそんな時期がありました。 今日はそ...

ですが、以下の点で非常に有用だなと思いました。
(逆に上記の方法ではこちらの問題を解決していません。)

・遷移の事前条件及びリダイレクト
Deep Linkとの相性の良さ
NavigatorObserverとの相性の良さ

遷移の事前条件及びリダイレクト

RouteGuardと言う機能があり、そちらを利用することで遷移する際の事前条件を指定することが出来ます。

auto_route | Flutter package
AutoRoute is a declarative routing solution, where everything needed for navigation is automatically generated for you.

ログインしていないとダメ、有料会員でないとダメ、などの判定に使えます。
もちろん、条件を満たさないユーザのリダイレクトも可能です。

Deep Linkとの相性の良さ

auto_route | Flutter package
AutoRoute is a declarative routing solution, where everything needed for navigation is automatically generated for you.

configメソッドに、Deep Link用の設定を指定することができます。

NavigatorObserverとの相性の良さ

やはり、メインの使い所としては画面ごとのログ送信とかでしょうか。
そして、NavigatorObserverを調べていてRouteObserverと言うのも知りました。

RouteObserver class - widgets library - Dart API
API docs for the RouteObserver class from the widgets library, for the Dart programming language.

これも使えそうなのでちょっと今後ウォッチしていきたいと思います。

How To Improve Ui Quality And Performance

VRT (Visual Regression Test)とパフォーマンス改善の話でした。

GitHub - reg-viz/reg-suit: :recycle: Visual Regression Testing tool
:recycle: Visual Regression Testing tool. Contribute to reg-viz/reg-suit development by creating an account on GitHub.
GitHub - playbook-ui/playbook-flutter
Contribute to playbook-ui/playbook-flutter development by creating an account on GitHub.
Cloud Storage
Cloud Storage を使用すると、データを複数の冗長化オプション付きで、実質的にどこからでも保存できます。

この辺を連携して全PRのCIにて実現しているそうです。

対象端末

各OS毎に

・通常サイズ
・タブレット
・一番大きい
・一番小さい

端末で行っているとのこと。

textScaleFactor

OSの設定で文字サイズを大きく設定していた時にUIが崩れないかのテストもしているとのこと。
1、1.5を固定値で指定しているようです。

integration_testでパフォーマンス監視および改善

個人的にはかなり興味深かったセクションでした。

integration_test自体は動かしているものの、それ以上でも以下でもなくコストは結構かかるので
正直悩ましい存在でした。

ですが、パフォーマンスの監視に使えると言うのです。

Performance profiling
How to profile performance for a Flutter app.

調べてみたらこちらのページがありました。

buildにかかる時間や、平均CPU利用率、平均メモリ利用量などのメトリクスが取得出来る様でこれはかなり活用の幅が広がるなと感じました!

小売アプリのためのアクセシビリティ

Semanticsに関する話でした。

存在は知っていながら、全然対応出来ていないので正直耳が痛い話になるかと思いきや
あまり意識していなくても公式のウィジェットは内部でSemanticsを利用しているため大体大丈夫だよ、とのこと。

その上で、例題の画面を提示しつつtipsを何個も発表していただき非常に勉強になりました。

画像

・そのままだと「イメージ」と読み上げられてしまう
CachedNetworkImageSemanticsでラップする
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.liveRegiontrueを設定する

タップ領域

・小さすぎるとUIを発見することができない
・最低でも40x40pxは確保する

その他レイアウトの工夫

Layout overflowを防ぐ

SizedBoxではなく、ConstrainedBoxで指定するとのこと。

僕もレイアウトのSizedBoxによる固定は出来る限り使いたくないです。

GridViewの高さを可変にする

GridViewマジでめんどくさいですよね…笑

flutter_layout_gridパッケージで実現しているそうです。

テキストを1行に収める

Text.overflowTextOverflow.ellipsis
FittedBox.fitBoxFit.scaleDown
textScaleFactorの上限値を設定

登壇してくださった3名の方、本当にありがとうございました!
Flutter3年くらいやってますが、まだまだ知らないことが多いなぁと刺激になった1日でした!!

誰かのお役に立てば。

Twitterフォローお願いします

「次回以降も記事を読んでみたい!」
「この辺分からなかったから質問したい!」

そんな時は、是非Twitter (@daiki1003)Instagram (@ashdik_flutter)のフォローお願いします♪

Twitterコミュニティ参加お願いします

Twitterコミュニティ「Flutter lovers」を開設しました!
参加お待ちしております😁

☕️ Buy me a coffee

また、記事がとても役に立ったと思う人は
コーヒーを奢っていただけると非常に嬉しいです!
@daiki1003

コメント

タイトルとURLをコピーしました