Widget testing in Flutter

Introduction

Widget testing helps you check if parts of your app look and work correctly. It finds problems early so your app is better.

To check if a button shows the right text and reacts when tapped.

To verify a list displays the correct items after loading data.

To test if a form shows error messages when input is wrong.

To confirm navigation happens when a user taps a link.

To ensure a widget updates its display after state changes.

Syntax

Flutter

testWidgets('description', (WidgetTester tester) async {
  await tester.pumpWidget(MyWidget());
  expect(find.text('Hello'), findsOneWidget);
  await tester.tap(find.byType(ElevatedButton));
  await tester.pump();
  expect(find.text('Clicked'), findsOneWidget);
});

testWidgets is the main function to write widget tests.

WidgetTester helps you build and interact with widgets in tests.

Examples

This test checks if a Text widget with 'Hi' is shown.

Flutter

testWidgets('finds a Text widget', (tester) async {
  await tester.pumpWidget(Text('Hi'));
  expect(find.text('Hi'), findsOneWidget);
});

This test taps a button and checks if the text changes.

Flutter

testWidgets('tap button changes text', (tester) async {
  await tester.pumpWidget(MyButtonWidget());
  expect(find.text('Press me'), findsOneWidget);
  await tester.tap(find.byType(ElevatedButton));
  await tester.pump();
  expect(find.text('Pressed'), findsOneWidget);
});

Sample App

This test builds a button widget that changes its text when tapped. It first checks the initial text, taps the button, then checks the updated text.

Flutter

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

class MyButtonWidget extends StatefulWidget {
  @override
  State<MyButtonWidget> createState() => _MyButtonWidgetState();
}

class _MyButtonWidgetState extends State<MyButtonWidget> {
  String buttonText = 'Press me';

  void _changeText() {
    setState(() {
      buttonText = 'Pressed';
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: ElevatedButton(
            onPressed: _changeText,
            child: Text(buttonText),
          ),
        ),
      ),
    );
  }
}

void main() {
  testWidgets('Button text changes when tapped', (WidgetTester tester) async {
    await tester.pumpWidget(MyButtonWidget());

    expect(find.text('Press me'), findsOneWidget);

    await tester.tap(find.byType(ElevatedButton));
    await tester.pump();

    expect(find.text('Pressed'), findsOneWidget);
  });
}

Important Notes

Use pumpWidget to build your widget inside the test environment.

Use find to locate widgets by text, type, or key.

Call pump() after interactions to update the UI.

Summary

Widget testing checks if UI parts look and behave as expected.

Use testWidgets with WidgetTester to write tests.

Interact with widgets and verify changes using find and expect.