[Flutter]アプリのUIを作成した際に、複数端末を一括で確認する

![スクリーンショット 2023-11-14 11.10.16（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/39ad7b50-7a99-96f1-d66a-3f09443a7d8b.png)


アプリのUIを作成した際に、一つの端末で動作を確認したりすることが多いと思います。そもそも１画面に何個も端末を確認していると時間がかかってしまいますね。

しかし、iPhone15だと問題ないと思っていてもiPhoneSEで確認してみるとoverflowしていることがあるかもしれません。それをできるだけ簡単に確認するやり方を知ることができたので共有させてください。


:::note warn
警告
ドキュメントを読みましたが、意図しない使い方をしているかもしれません。
間違った使い方や認識をしている場合はこ気軽にコメントください🙇
:::




# golden_toolkit

https://pub.dev/packages/golden_toolkit

↑こちらを参照しました。

本来の使い方としては、さまざまなサイズ、入力値、またはアクセシビリティ オプションを指定して、ウィジェットのさまざまな状態をすばやくテストできると記載されていますが、「さまざまなサイズでウィジェットをテストする」と言った点は、 UIの確認をさまざまなサイズで確認することもできると思います。



# 実際に使用してみる

### 1.Packageを導入

```
flutter pub add golden_toolkit

flutter pub get
```

### ２.失敗した場合のフォルダーを`.gitignore`に追記する

```.gitignore
# don't check in golden failure output
**/failures/*.png
```

### ３.フォントのロードを行う

デフォルトでは、フラッター テストは Ahem という単一の「テスト」フォントのみを使用します。
このフォントは、すべての文字とアイコンに黒いスペースが表示されるように設計されています。

testディレクトリ直下に`flutter_test_config.dart`を追加し、以下の記載を行います。

```dart: flutter_test_config.dart
import 'dart:async';

import 'package:golden_toolkit/golden_toolkit.dart';

Future<void> testExecutable(FutureOr<void> Function() testMain) async {
  await loadAppFonts();
  return testMain();
}
```

# Golden Testを書いてみる

```dart:widget_test.dart
import 'package:golden_test_app/main.dart';
import 'package:golden_toolkit/golden_toolkit.dart';

void main() {
  testGoldens('test', (tester) async {
    final builder = DeviceBuilder()
      ..overrideDevicesForAllScenarios(
          devices: [Device.iphone11, Device.phone, Device.tabletLandscape])
      ..addScenario(widget: MyApp(), name: 'my_app');

    await tester.pumpDeviceBuilder(builder);

    await screenMatchesGolden(tester, 'my_app');
  });
}

```

<b>↓main.dartはこちらに載せております🤗</b>

<details><summary>main.dart</summary>




```dart:main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:$_counter',
              style: const TextStyle(
                fontSize: 80,
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

```
</details>


実際に生成された画像としては以下のようなものとなります。

![my_app.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/30213055-3875-ac47-f558-4702a9ec169f.png)


このような感じでデバイスのサイズごとにUIがどうなっているのか確認することができます。


# 注意点
- 実行する必要がある典型的な動作Widget Testの代替となることを目的としたものではない。
- 従来のウィジェット テストよりも実行に時間がかかるため、いつ使用するかを意図的に考慮することが大切