Integration testing in Flutter - Mini App: Build & Ship

Build: Counter App

A simple counter app where users can increment and reset a counter. Integration test will verify the full flow of incrementing and resetting.

Target UI

+---------------------+
| Counter App         |
+---------------------+
| Count: 0            |
|                     |
| [+] Increment       |
| [Reset] Reset       |
+---------------------+

Display a counter starting at 0

Increment button increases the counter by 1

Reset button sets the counter back to 0

Integration test to tap increment twice and reset once, verifying displayed count

Starter Code

Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: CounterScreen(),
    );
  }
}

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++;
    });
  }

  void _reset() {
    setState(() {
      _count = 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Counter App')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Count: $_count', key: const Key('counterText'), style: const TextStyle(fontSize: 24)),
            const SizedBox(height: 20),
            ElevatedButton(
              key: const Key('incrementButton'),
              onPressed: _increment,
              child: const Text('+ Increment'),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              key: const Key('resetButton'),
              onPressed: _reset,
              child: const Text('Reset'),
            ),
          ],
        ),
      ),
    );
  }
}

// TODO: Add integration test in test_driver or integration_test folder

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

Flutter

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:integration_test/integration_test.dart';
import 'package:your_app/main.dart' as app;

void main() {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();

  testWidgets('Counter increments and resets correctly', (WidgetTester tester) async {
    app.main();
    await tester.pumpAndSettle();

    final Finder incrementButton = find.byKey(const Key('incrementButton'));
    final Finder resetButton = find.byKey(const Key('resetButton'));
    final Finder counterText = find.byKey(const Key('counterText'));

    // Initial count should be 0
    expect(find.text('Count: 0'), findsOneWidget);

    // Tap increment twice
    await tester.tap(incrementButton);
    await tester.pumpAndSettle();
    await tester.tap(incrementButton);
    await tester.pumpAndSettle();

    // Verify count is 2
    expect(find.text('Count: 2'), findsOneWidget);

    // Tap reset
    await tester.tap(resetButton);
    await tester.pumpAndSettle();

    // Verify count is 0
    expect(find.text('Count: 0'), findsOneWidget);
  });
}

This integration test uses Flutter's integration_test package to run the full app and simulate user taps.

We start the app, then find the increment and reset buttons by their keys.

We tap the increment button twice and check the counter text updates to 'Count: 2'.

Then we tap the reset button and verify the counter resets to 'Count: 0'.

This test confirms the app's UI and logic work together correctly.

Final Result

Completed Screen

+---------------------+
| Counter App         |
+---------------------+
| Count: 2            |
|                     |
| [+] Increment       |
| [Reset] Reset       |
+---------------------+

User taps '+ Increment' button twice, count increases from 0 to 2

User taps 'Reset' button, count resets to 0

Stretch Goal

Add an integration test to verify the app shows a snackbar message 'Reset done' when reset button is tapped.

💡 Hint

Use ScaffoldMessenger.of(context).showSnackBar in the reset method and check for snackbar text in the test.