Flutter Widget Previewerで始めるUIプレビューとVRTの自動化

FlutterKaigi 2026 (Day1) beginners LT
https://github.com/sakusaku3939/flutter-widget-previewer-test

Transcript

1. FlutterKaigi 2026 Flutter Widget Previewerで始めるUI プレビューとVRTの自動化 あおきち / Aoki Yuki
2. AI時代のUI開発、どうやっていますか？
3. AIは90%のUIを作ってくれるようになった！ ...けど細かいUIの調整が必要 〇〇の画面 の xxのUI の1pxを修正したい オンボーディング、決済完了など、気軽にUIを確認できない画面の修正 FlutterのHot reloadで全て高速に解決？ No たまに求められるHot restartで振り出しに戻る また0から目的の画面に行かないと... 3
4. Flutter Widget Previewerの紹介 Jetpack ComposeやSwiftUIを使っている 人はお馴染みのUIプレビュー 2026年8月のFlutter 3.47から、 experimentalフラグが外れてstableで利 用可能 🎉 Flutter 3.35から利用でき、Flutter 3.38で VS Code、Android Studioのサイドバーに 起動できるようになった → OSSでの導入事例： Immich, kakao SDK 4
5. Flutter Widget Previewerの使い方 @Preview を付けた関数が flutter widget-preview start で一覧表示される ↑ プレビュー名や表示サイズを引数で指定できる https://docs.flutter.dev/tools/widget-previewer 5
6. UIカタログと何が違う？ アプリで使われるボタンや入力フォーム などを一覧化するツール Widgetbook 、Playbook Flutter界隈ではUIカタログが採用されて きた 6
7. UIカタログと何が違う？ UIカタログあるある 💭 「初期にデザイナーレビューのために入れたけど、途中からアプリが出来上がってきて誰も 使わなくなっちゃった」 💭 「最初は共通Widgetだけだったのに、画面や表示状態までカタログ化することになって、管 理対象がどんどん増えていく…」 UIカタログの保守範囲が広がっていき、継続的な運用が難しくなることも... 7
8. UIカタログのいいところ 👍 検索性・表示カスタマイズ性が高く、デザイナーやステークホルダーに共有しやすい ❌ カタログ化する範囲の線引きが難しく、運用が過剰になりやすい → Buttonのような小さなWidgetから、複数のWidgetを組み合わせたコンポーネントまで、管理対象が広 がりやすい Flutter Widget Previewerのいいところ 👍 あくまで開発者向けのUIチェックを想定。画面やWidget（コンポーネント）単位 ❌ 機能がシンプル。表示内容の切り替えや端末プリセットでの比較などUI機能は限定的 8
9. Flutter Widget Previewerで現状できないこと（2026年の参考程度に） Flutter Webで動かしている dart:io や dart:ffi は呼び出せないため、モック化するかPreviewerの対象から外す アプリの main() や通常の初期化が実行されない 通常の main()、DI登録、サービスロケーター、Providerの初期構築などは自動実⾏されない テーマ、ローカライズ、Provider、Router、APIモック、Feature Flagなどを再構成する必要があ る 中規模以上のプロジェクトになると重い。IDEサポートはまだ不安定 一覧表⽰してスクロールするとちょっと固まる...（M1 Macbook Airの16GB環境） Android Studioで起動し続けているとOut of memoryが起きる（Windows環境） VS Codeの狭いパネルでコントロールが重なり、RenderFlex overflowが発生するIssueがFlutter 3.44.5環境から報告 9
10. 本題： Flutter Widget PreviewerをVRTに使 い回したい
11. Widget PreviewerをVRTに使い回したい VRT（Visual Regression Testing）とは？ → UIの見た目が意図せず変わっていないか をスクリーンショットの画像比較で自動検出 するテスト手法 関連： スクリーンショットテスト／ゴールデンテスト 11
12. FlutterでVRTを実現する方法 alchemist golden_toolkit のメンテナンスが終了したため、現在は alchemist がゴールデンテストの主 流になっている golden_screenshot AppStore/PlayStore向けのスクリーンショット自動生成にも流用可 flutter_test Flutter標準のflutter_testでゴールデンテストが可能 VRTは撮影対象の定義が必要 UIプレビューと一緒に導入すると二重管理になってしまう 🚧 12
13. Jetpack Compose（Android）でのVRTの事例 Jetpack Composeでは Roborazzi というVRTツールがある JVM上で@PreviewのUIをレンダリングして、スクリーンショットを撮影・差分比較できる 開発時に使うUIプレビューのコードを書くだけで、VRT用のスクリーンショットを撮影す ることができる 13
14. Flutter Widget Previewerでも同じ仕組みを作りたい → freezed、riverpod_generator でお馴染みの build_runner を活用する → @PreviewをVRT対象として build_runner で vrt_previews.g.dart を自動生成する
15. @Preview からVRTのコードを自動生成する ↓ 自動生成ファイル（vrt_previews.g.dart）の例 @Preview が付いた関数を build_runner で 検出 VRTの撮影対象一覧を vrt_previews.g.dart に自動生成 📝 補足：VRT用のコードはCIで生成するため、普段の開発では手動で build_runner を実行しなくてもOK 15
16. GitHubのPRコメントに差分画像を投稿する PRを出したときにCIで画像差分がコメントに投稿 される Before / After / Diffを並べて、UIの変更を視覚的 にレビューできる サンプルコードはこちら 「https://github.com/sakusaku3939/flutter-widget-previewer-test をこのリポジトリに入れられる？」のようにお使いください 16
17. AIエージェント時代のUI開発 今は要件とデザインを渡したらClaude CodeやCodexが自動で実装してPRを出してくれる こういったUI差分を画像としてPRで出してくれると人間がサッと確認しやすい 完成したUIはPRコメントに投稿されたVRT差分、細かいUI修正はWidget Previewer 17
18. おわりに Flutter Widget Previewerを使ったUIプレビューとVRTのアイデアを紹介 @PreviewをVRTにも再利用することで、UIプレビューとVRTの二重管理をなくせる AIエージェントが実装したUIも、PR上の画像差分でレビューしやすくなる おまけ： Koji Wakamiyaさんが9月に公開したshutterも近いアイデアで、@Previewを使った画像の撮影や差分比較ができま す。build_runner が不要で、ローカル環境やAIエージェントからも手軽に使えるようになっています！ あおきち / Aoki Yuki SFCの大学4年生です。FlutterとLLMOpsをやってます 18