← ClaudeAtlas

flutter-add-widget-testlisted

Implement a component-level test using `WidgetTester` to verify UI rendering and user interactions (tapping, scrolling, entering text). Use when validating that a specific widget displays correct data and responds to events as expected.
izo/Ulk · ★ 1 · Testing & QA · score 68
Install: claude install-skill izo/Ulk
# Writing Flutter Widget Tests ## Contents - [Setup & Configuration](#setup--configuration) - [Core Components](#core-components) - [Workflow: Implementing a Widget Test](#workflow-implementing-a-widget-test) - [Interaction & State Management](#interaction--state-management) - [Examples](#examples) ## Setup & Configuration Ensure the testing environment is properly configured before authoring widget tests. 1. Add the `flutter_test` dependency to the `dev_dependencies` section of `pubspec.yaml`. 2. Place all test files in the `test/` directory at the root of the project. 3. Suffix all test file names with `_test.dart` (e.g., `widget_test.dart`). ## Core Components Utilize the following `flutter_test` components to interact with and validate the widget tree: * **`WidgetTester`**: The primary interface for building and interacting with widgets in the test environment. Provided automatically by the `testWidgets()` function. * **`Finder`**: Locates widgets in the test environment (e.g., `find.text('Submit')`, `find.byType(TextField)`, `find.byKey(Key('submit_btn'))`). * **`Matcher`**: Verifies the presence or state of widgets located by a `Finder` (e.g., `findsOneWidget`, `findsNothing`, `findsNWidgets(2)`, `matchesGoldenFile`). ## Workflow: Implementing a Widget Test Copy the following checklist to track progress when implementing a new widget test. ### Task Progress - [ ] **Step 1: Define the test.** Use `testWidgets('description', (WidgetTester tester) async { .