Widget testing in Flutter - Mini App: Build & Ship

Build: Counter Screen

A simple screen with a number and a button to increase the number. This screen will be tested with widget tests.

Target UI

Counter Screen

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

Display a number starting at 0

A button labeled 'Increment' below the number

Pressing the button increases the number by 1

Starter Code

Flutter

import 'package:flutter/material.dart';

class CounterScreen extends StatefulWidget {
  @override
  State<CounterScreen> createState() => _CounterScreenState();
}

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

  void _increment() {
    // TODO: Implement increment logic
  }

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

Task 1

Solution

Flutter

import 'package:flutter/material.dart';

class CounterScreen extends StatefulWidget {
  @override
  State<CounterScreen> createState() => _CounterScreenState();
}

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

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

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

This solution uses a StatefulWidget to keep track of the counter value. The _increment method calls setState to update the counter and refresh the UI. The button triggers this method when pressed, increasing the number displayed on screen.

This simple structure is perfect for widget testing because you can simulate button taps and check if the number updates correctly.

Final Result

Completed Screen

Counter Screen

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

When the user taps the 'Increment' button, the number increases by 1

The UI updates immediately to show the new number

Stretch Goal

Write a widget test that taps the Increment button and verifies the number changes from 0 to 1.

💡 Hint

Use Flutter's testWidgets function, find the button by text, tap it, then check if the text '1' appears.