Flutter 棒グラフの実装から学ぶ Container と Canvas の使い分け

Flutter × Kotlin Multiplatform by CyberAgent #7
https://cyberagent.connpass.com/event/254315

での登壇資料です。

Transcript

1. Flutter 棒グラフの実装から学ぶ Container と Canvas の使い分け Flutter × Kotlin Multiplatform by CyberAgent #7 2022/08/04 #ca_flutter_kmm
2. 自己紹介 - 横井 一樹（Kazuki Yokoi） - Y! から CA - Flutter で WINTICKET - Vim にどハマり
3. 自己紹介 - 横井 一樹（Kazuki Yokoi） - Y! から CA - Flutter で WINTICKET - Vim にどハマり WINTICKET は Flutter エンジニアが 8人在籍しているが、4人が vimmer
4. はじめに CyberAgent の DevelopersBlog に投稿した内容と同じ 👉 https://developers.cyberagent.co.jp/blog/archives/36573 Github 👉 https://github.com/Yokoi-K/flutter_bar_chart_sample
5. 今回のゴール - UI を組むときに、Canvas という選択肢があることを知る - 求められている要件に対して Container と Canvas を適切に使い分ける
6. 注意点 あえて Canvas の対となるものを Widget ではなく Container としている Widget とすると抽象的になり、誤解を招く恐れがあるため
7. アジェンダ 1. Container と Canvas の実装の比較 2. 棒グラフの仕様 3. 棒グラフの実装 4. 両者の棒グラフのパフォーマンス比較 5. パフォーマンスの差の要因分析 6. セマンティクス 7. まとめ 8. Canvas の使用が求められる要件
8. Container と Canvas の実装の比較
9. Container の実装 通常 Flutter で UI を組むときは、 Widget と呼ばれる UI コンポーネントを複数組み合わせて作る
10. Container の実装 例えば、次のような UI を作りたいときは
11. Container の実装 - 「 Hello 」という文字列を - 「白色」で - 「左右に 16 の padding 」をつけて - 「赤色の背景色」の上に 表示させるように次のような パラメータを指定
12. Container の実装 - 「 Hello 」という文字列を - 「白色」で - 「左右に 16 の padding 」をつけて - 「赤色の背景色」の上に 表示させるように次のような パラメータを指定
13. Container の実装 「宣言的」に UI を実装
14. Container の実装 「宣言的」に UI を実装 不都合 - 複雑な図形を表現する困難さ - それを表現するために、膨大な数の Widgetを配置することによるパ フォーマンスへの影響
15. Canvas の実装 Flutter で Canvas を扱うためには、 CustomPaint と呼ばれる Widget を使用し ます。
16. Canvas の実装 Flutter で Canvas を扱うためには、 CustomPaint と呼ばれる Widget を使用し ます。 例として、先ほど Container を使って書いた 図形を Canvas で描画するには
17. Canvas の実装
18. Canvas の実装 「宣言的」ではなく、「命令的」に UI を実装
19. 棒グラフの仕様
20. 検証のために用いる棒グラフの仕様
21. 検証のために用いる棒グラフの仕様 X 軸 - 何番目の棒グラフかを表す - 5 分割で表示する - 最大値は引数で与えられる
22. 検証のために用いる棒グラフの仕様 Y 軸 - 棒グラフの高さを表す - 5 分割で表示する - 最大値は 300 とする X 軸 - 何番目の棒グラフかを表す - 5 分割で表示する - 最大値は引数で与えられる
23. 検証のために用いる棒グラフの仕様 棒グラフ - 与えられた色と高さを元に描 画する - フェードインしながら、その高 さまで伸びるアニメーションを 行う X 軸 - 何番目の棒グラフかを表す - 5 分割で表示する - 最大値は引数で与えられる Y 軸 - 棒グラフの高さを表す - 5 分割で表示する - 最大値は 300 とする
24. 棒グラフに与えるパラメータ 指定した個数分、高さ 101 ~ 300 の範囲で ランダムに生成するメソッドを用意 ここで生成したパラメータを棒グラフに渡す
25. 棒グラフのレイアウト構成 X 軸 と Y 軸 と 棒グラフ のパーツを 図のように、Stackで配置 （シンプル〜） ※この方法が最適ということではないので、 　あくまで一例として見て頂けると 🙏
26. 棒グラフの実装
27. 「コードは抜粋したもの」 細かいので実装の雰囲気が 伝われば嬉しいです🙏
28. Container を使った棒グラフの実装 棒グラフの個数分、横並びに Container を 並べる
29. Container を使った棒グラフの実装 ポイント 棒グラフの高さを伸ばすアニメーション箇所は、それぞれの 棒グラフの高さに応じて進捗を変える計算式
30. Container を使った棒グラフの実装 ポイント 棒グラフの高さを伸ばすアニメーション箇所は、それぞれの 棒グラフの高さに応じて進捗を変える計算式 height: item.height * animationHeight.value / maxBarHeight, ↑のコードを日本語に要約すると ↓ 棒グラフの高さ = 指定された高さ × 高さの現在のアニメーション値 / 高さの最大のアニメーション値
31. Canvas を使った棒グラフの実装 １つ１つの棒グラフの座標を 計算して描画 コード量が多くなった
32. Canvas を使った棒グラフの実装 棒グラフの高さを伸ばすアニメー ション箇所は、 Container での実 装と全く同じ final animationBarHeight = item.height * animationHeight / yAxisHeight;
33. Canvas を使った棒グラフの実装 棒グラフの高さを伸ばすアニメー ション箇所は、 Container での 実装と全く同じ 複雑なことは 座標の計算程度
34. 両者の棒グラフのパフォーマンス比較
35. パフォーマンス比較 棒グラフの数を 10, 100, 1000, 5000 と増やしていき、 両者の UI スレッドへの負荷を比較します。
36. 検証環境 - Android Pixel3XL - OS 11 - Release build
37. パフォーマンス比較【棒グラフ 10 個】 Container Canvas
38. パフォーマンス比較【棒グラフ 100 個】 Container Canvas
39. パフォーマンス比較【棒グラフ 1000 個】 Container Canvas
40. パフォーマンス比較【棒グラフ 5000 個】 Container Canvas
41. 検証結果 なかなか面白い結果となりました。 Debug build で比較すると、もっと顕著に差が出ます。
42. 検証結果 Container Canvas Devtools を使用して 5000 個描画した際の UI スレッドの負荷
43. 検証結果 Container Canvas Devtools を使用して 5000 個描画した際の UI スレッドの負荷 - Container の平均値は 156.7ms - Canvas の平均値は 29.2ms 平均値 = 1 フレームにかかる描画時間の平均
44. 検証結果 Container Canvas - Container の平均値は 156.7ms - Canvas の平均値は 29.2ms 5 倍以上の差があることから、 Canvas の方が棒グラフの数を増やしても 安定したパフォーマンスを誇っている ことが分かった Devtools を使用して 5000 個描画した際の UI スレッドの負荷
45. パフォーマンスの差の要因分析
46. 要因 5000 個のケースで Canvas のパフォーマンスの方が目立って優れていた要因の１ つとして、棒グラフの数をいくつ増やしても Widget の数は常に変わらないところで す。
47. 要因 Container Canvas 両者の Widget ツリー
48. 要因 Canvas CustomPaint 内で描画する棒グラフを増やすだ けなので常に Widget 数は単一 Container 棒グラフの数だけ自身を増やすため、 Row の children として 5000 個の Widget が並ぶことに なる Container Canvas 両者の Widget ツリー
49. 要因 Container Canvas 両者の Widget ツリー 数の多さにあまり影響を受けない Canvas の方が、膨大な数を一度にア ニメーションさせたい要件の時に力を 発揮します
50. セマンティクス
51. Semantics Widget セマンティクスを適用したい Widget に Semantics をラップする
52. Canvasでのセマンティクス CustomPainter の semanticsBuilder を使用します 指定した領域に対してセマンティクス を適用します
53. Canvasでのセマンティクス 適用したい UI に直接ラップする構造 ではないため、可読性は劣るが Canvas で作られた UI でもアクセシ ビリティを高めることが可能
54. まとめ
55. 両者の特徴を比較 Container Canvas 可読性 優れている 計算式が多くなるため劣る パフォーマンス 問題ないが検証した通り、膨大な数を アニメーションさせたい要件などでは劣 る 優れている セマンティクス 優れている 可読性は劣るが問題なく適用 可能
56. Canvas の使用が求められる要件
57. 引数に応じて複雑な図形を描画する、Container では表現が困難な UI 例えば、引数に応じて多角形の辺の数を変化させるような UI もしアニメーションや引数が無く、 ただ複雑な図形を描画したいだけであれば、 実装コスト削減の目的で画像として作成した方が好ましいケースもある 多角形
58. パフォーマンスが求められるアニメーション付きの棒グラフ 棒グラフの個数が極めて少ない、もしくはアニメーションが大して激しくなければ Canvas を使わな い選択肢もある しかし、将来仕様変更により「個数の増加」や「さらにリッチなアニメーションの実装」 を行いたい時に パフォーマンスを気にするようであれば、最初から Canvas で実装をしておきたい👀
59. ゲーム系のアプリ Flutter で、2D のゲーム開発をする際には FLAME というパッケージを使用することが多い 今回 Canvas を使う際に用いた CustomPainter は介さないが、この FLAME というパッケージ内 でも Canvas を操作する箇所が登場する
60. 両者の特性をしっかりと理解し、 求められている要件に応じて適切に使い分けていくことで より良いアプリが出来上がる ご清聴ありがとうございました !!