Golden tests for UI in Flutter - Mini App: Build & Ship

Build: Simple Counter Screen

A screen with a counter number and a button to increment it. We want to create a golden test to verify the UI looks correct.

Target UI

---------------------
|   Counter Screen   |
|                   |
|       0           |
|                   |
|  [Increment Button]|
---------------------

Display a number starting at 0 in the center

A button labeled 'Increment' below the number

Pressing the button increases the number by 1

Create a golden test that captures the initial UI

Create a golden test that captures the UI after one increment

Starter Code

Flutter

import 'package:flutter/material.dart';

class CounterScreen extends StatefulWidget {
  const CounterScreen({super.key});

  @override
  State<CounterScreen> createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
  int _count = 0;

  void _increment() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Counter Screen')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('$_count', style: const TextStyle(fontSize: 48)),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _increment,
              child: const Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

// TODO: Add golden tests in test/counter_screen_test.dart

Task 1

Task 2

Solution

Flutter

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:golden_toolkit/golden_toolkit.dart';
import 'package:your_app/counter_screen.dart';

void main() {
  testGoldens('CounterScreen initial state', (tester) async {
    await tester.pumpWidgetBuilder(const CounterScreen());
    await screenMatchesGolden(tester, 'counter_screen_initial');
  });

  testGoldens('CounterScreen after increment', (tester) async {
    await tester.pumpWidgetBuilder(const CounterScreen());
    await tester.tap(find.text('Increment'));
    await tester.pumpAndSettle();
    await screenMatchesGolden(tester, 'counter_screen_after_increment');
  });
}

This solution uses the golden_toolkit package to create golden tests for the CounterScreen.

First, it tests the initial UI with the counter at 0 and saves a golden snapshot named counter_screen_initial.

Second, it taps the 'Increment' button, waits for the UI to update, and saves another golden snapshot named counter_screen_after_increment.

These golden images help ensure the UI does not change unexpectedly in future code changes.

Final Result

Completed Screen

---------------------
|   Counter Screen   |
|                   |
|       1           |
|                   |
|  [Increment Button]|
---------------------

User taps 'Increment' button

Number increases from 0 to 1

UI updates to show new number

Stretch Goal

Add a golden test for dark mode appearance

💡 Hint

Wrap the widget with a Theme widget using ThemeData.dark() before capturing the golden snapshot