Flutter has a powerful feature to test the look of your UI down to the pixel. Flutter can also render Widgets in tests, so we can leverage this to test how widgets get rendered with different screen sizes and get notified when the look of a widget changes. This feature is called “goldens”.

It’s pretty easy to use, but there are a few gotchas. Let’s look into it.

First, let’s create a simple widget that we will test later.

This Widget shows tiles in a grid. The wider the screen is, to more columns the grid will have.

Let’s write a golden file test for it:

We use the same theme as in the main app, the ensure a consistent look. We also wrap the widget in a Scaffold, the ensure the default text styles from the Theme are applied automatically.

We need to run

flutter test --update-goldens

the first time after editing golden tests, so all the initial golden images get regenerated.

A file called grid.png has been created in the goldens/ directory in the test directory. Let’s look at the image:

Hm. Golden files uses a resolution of 800x600 by default, which is not what we want for our Flutter app. Also, text rendering does not seem to work.

Loading custom fonts

appTheme uses custom fonts, which are not loaded in golden tests:

If we want to use custom fonts in golden tests, we need to load them first:

We can now call loadFonts() in setUpAll().

Let's try running flutter test again:

flutter test

00:03 +0: test the grid

══╡ EXCEPTION CAUGHT BY FLUTTER TEST FRAMEWORK ╞════════════════════════════════════════════════════

The following TestFailure object was thrown running a test:

Expected: one widget whose rasterized image matches golden image "goldens/grid.png"

Actual: _WidgetTypeFinder:<exactly one widget with type "MyResponsiveGrid" (ignoring offstage

widgets): MyResponsiveGrid(dependencies: [MediaQuery])>

Which: Golden "goldens/grid.png": Pixel test failed, 1.85% diff detected.

Failure feedback can be found at /.../test/failures

Great! The widget now renders differently, so our golden tests fail. Flutter automatically generates a “failures” directury, that contains the expected image, the actual image and the difference between those two: