I tried Golden Test

https://pub.dev/packages/golden_toolkit

Verify using this library

By the way, it seems that the screenshot of the master is called Golden.

I tried to test the case where the color of the widget is different with the counter application

procedure

1. Add golden_toolkit to dev_dependencies

2. Create golden_test.dart in the test folder

3. Edit golden_test.dart

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:golden_toolkit/golden_toolkit.dart';
import 'package:flutter_golden_test_demo/main.dart';

void main() {
  testGoldens('app', (WidgetTester tester) async {
    //デバイスの画面サイズ
    final size = Size(415, 896);
    
    //第一引数はどのWidgetをビルドするのか指定、どのサイズにビルドするかがsurfaceSize
    await tester.pumpWidgetBuilder(MyApp(), surfaceSize: size);
    

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

4. Golden creation (master screenshot)

The goldens file should be created in the test folder with the following command, and myApp.png should be created.

flutter test --update-goldens

5. Actually test (OK)

Test with the following command.

flutter test

Result is

All tests passed!

Should be.

6. Actually test (NG edition)

Let’s change the primary color of main.dart without changing Golden.

Test with the following command.

flutter test

Result is

Some tests failed.

Should be.

If the test fails, a failures file is created in the test folder, and a screenshot of what was different under it is created. As you can see, it judges the difference properly,