golden_screenshot

Utilities to automate screenshot generation using Flutter's golden tests.

Currently, there isn't much customization available, but I'll probably add more in the future.

The generated screenshots are suitable for the App Store, Play Store, F-Droid, Flathub (Linux), etc, and are saved in a Fastlane-compatible directory structure (e.g. metadata/en-US/images/phoneScreenshots/1_home.png). See lib/src/screenshot_device.dart for the list of devices and the paths where the screenshots are saved.

Getting started

In your pubspec.yaml file, add golden_screenshot as a dev_dependency before running flutter pub get:

dev_dependencies:
  flutter_test:
    sdk: flutter
  
  golden_screenshot: ^x.y.z # Replace x.y.z with the latest version

Then create a file in your test directory (e.g. test/screenshot_test.dart) and use example/test/screenshots_test.dart as a template to create your own tests.

The main portion might look something like this:

    _testGame(
      goldenFileName: '1_home',
      child: const HomePage(),
    );
    _testGame(
      gameSave: inProgressGameSave,
      frameColors: playPageFrameColors,
      goldenFileName: '2_play',
      child: const PlayPage(),
    );
    _testGame(
      goldenFileName: '4_shop',
      child: const ShopPage(),
    );
    _testGame(
      goldenFileName: '5_tutorial',
      child: const TutorialPage(),
    );
    _testGame(
      goldenFileName: '6_settings',
      child: const SettingsPage(),
    );

If you're familiar with golden tests, you'll notice the golden file is not compared in the usual way in the example. Instead of using expectLater, we use tester.expectScreenshot from this package:

// OLD
await expectLater(find.byType(HomePage), matchesGoldenFile('1_home'));
// NEW
await tester.expectScreenshot(matchesGoldenFile('1_home'));

tester.expectScreenshot allows for a 0.1% difference (configurable) between the expected and actual image, useful for screenshots since we don't require every pixel to be exactly the same. With this feature, we can allow shadows in golden files with debugDisableShadows (see the example) without the test becoming flaky.

Usage

Once you have created your test file, run the following command to generate the screenshots:

flutter test test/screenshot_test.dart --update-goldens