Flutter 3.38からIDEサポートされたFlutter Widget Previewerを試してみた！

Flutter 3.38からIDEサポートされたWidget Preview機能を実際に触って色々試してみました。
AndroidのJetpack Composeにある@Previewがとても便利だったのでFlutterで使えるようになるの楽しみにしてました👏

experimentalの機能のため、今後修正が入る可能性があります

Please be aware that this is an experimental feature available in the Flutter stable channel. The APIs are not stable and will change. This guide is for the current early access version, and you should expect future updates to introduce breaking changes.

Flutter Widget Previewerとは

実装中のコードのウィジェットがリアルタイムでIDE上にレンダリングされて表示内容の確認ができる機能です。
AndroidのJetpack Composeにある@Previewと同様の機能でコンポーネント単位でUIの確認ができるようになるので実装効率の向上が期待できます。

検証環境

Flutter 3.38.0
Dart SDK version: 3.10.0-290.4.beta
VSCode: Version: 1.105.1 

プレビューを表示してみる

公式ドキュメントを参照にプレビューを表示してみます。
https://docs.flutter.dev/tools/widget-previewer

ファイルを追加しサンプルコードを実装し、Flutter Widget Previewタブを選択するとプレビューが表示されました。
最初、私の環境ではFlutter Widget Previewタブが表示されていなかったので、VSCodeのアップデートが必要でした

.dart

import 'package:flutter/widget_previews.dart';
import 'package:flutter/material.dart'; // For Material widgets

@Preview(name: 'My Sample Text')
Widget mySampleText() {
  return const Text('Hello, World!');
}

ウィジェットの中身を変更せず、プレビューの表示を変更することも可能です

• name: プレビューの説明的な名前
• group: ウィジェット プレビューアーで関連するプレビューをグループ化するために使用される名前
• size: オブジェクトを使用した人工的なサイズ制約 Size
• textScaleFactor: カスタム フォント スケール
• wrapper: プレビューされたウィジェットを特定のウィジェット ツリーにラップする関数
• theme: Material および Cupertino テーマ設定データを提供する機能
• brightness: テーマの初期の明るさ
• localizations: ローカリゼーション設定を適用する機能

同じグループにまとめることで見やすく表示できる👏

また、1つのウィジェットに対して複数の@Previewを付与することができるのでフォントサイズによるデザイン崩れの確認も容易にできそうです

@Preview アノテーションを自作する

複数のプレビューをまとめて1つのアノテーションで表示することも可能です。
ここでは3パターンのフォントサイズを1つのアノテーションで表示するカスタムプレビューを実装してみました。

.dart

final class MultiTextScaleFactorPreview extends MultiPreview {
  const MultiTextScaleFactorPreview();

  @override
  List<Preview> get previews => const [
        Preview(
          group: 'TextScaleFactor',
          name: 'Example - 1.0',
          textScaleFactor: 1.0
        ),
        Preview(
          group: 'TextScaleFactor',
          name: 'Example - 2.0',
          textScaleFactor: 2.0
        ),
         Preview(
          group: 'TextScaleFactor',
          name: 'Example - 0.5',
          textScaleFactor: 0.5
        ),
      ];
}

プレビューを表示したいWidgetに対して上で実装した@MultiTextScaleFactorPreviewを付与するだけで3パターンのプレビューが表示されます。

.dart

@MultiTextScaleFactorPreview()
Widget mySampleButton () {
  return FilledButton(onPressed: (){}, child: const Text('Tap!!'));
}

色々触ってみた

プレビューでのインタラクティブな操作
TextFieldの入力確認はできる

Switchの切り替えもできる

ローカルの画像の表示も問題なし

Network経由で画像を取得して表示するのはできなさそう

プレビューレンダリングのコピー
Jetpack Composeではプレビューを画像としてコピーできましたがFlutterではできなさそうでした
https://developer.android.com/develop/ui/compose/tooling/previews?hl=ja#preview-copy-render

まとめ

Flutter Widget Previewerの導入により、コンポーネント単位でのUI実装効率の向上が見込めそうです。Jetpack Composeにある@Preview と大規模なデータセットのような引数を渡せる機能が公式ドキュメントに見当たらなかったので今後追加されるのを期待したいです

今回のサンプルリポジトリ
https://github.com/ike04/flutter_preview_learning