From flutter-skills-33
Implements Flutter widget tests using WidgetTester to verify UI rendering and interactions (tapping, scrolling, text input). Use when validating specific widgets display correct data and respond to events.
npx claudepluginhub joshuarweaver/cascade-code-languages-misc-1 --plugin flutter-skills-33This skill uses the workspace's default tool permissions.
- [Setup & Configuration](#setup--configuration)
Conducts multi-round deep research on GitHub repos via API and web searches, generating markdown reports with executive summaries, timelines, metrics, and Mermaid diagrams.
Dynamically discovers and combines enabled skills into cohesive, unexpected delightful experiences like interactive HTML or themed artifacts. Activates on 'surprise me', inspiration, or boredom cues.
Generates images from structured JSON prompts via Python script execution. Supports reference images and aspect ratios for characters, scenes, products, visuals.
Ensure the testing environment is properly configured before authoring widget tests.
flutter_test dependency to the dev_dependencies section of pubspec.yaml.test/ directory at the root of the project._test.dart (e.g., widget_test.dart).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).Copy the following checklist to track progress when implementing a new widget test.
testWidgets('description', (WidgetTester tester) async { ... }).await tester.pumpWidget(MyWidget()) to render the UI. Wrap the widget in a MaterialApp or Directionality widget if it requires inherited directional or theme data.Finder objects for the target widgets.expect(finder, matcher) to validate the initial render.await tester.tap(buttonFinder)).await tester.pump() or await tester.pumpAndSettle() to process state changes.expect() to validate the UI after the interaction.flutter test test/your_test_file_test.dart.Apply the following conditional logic based on the type of interaction or state change being tested:
await tester.pumpWidget() once, then immediately run expect() assertions.await tester.tap(finder).await tester.pump() to trigger a single frame rebuild.await tester.drag(finder, Offset(500, 0))).await tester.pumpAndSettle() to repeatedly pump frames until no more frames are scheduled (animation completes).await tester.enterText(textFieldFinder, 'Input string').await tester.scrollUntilVisible(itemFinder, 500.0, scrollable: listFinder) to ensure the target widget is rendered before interacting with it.Target Widget (lib/todo_list.dart):
import 'package:flutter/material.dart';
class TodoList extends StatefulWidget {
const TodoList({super.key});
@override
State<TodoList> createState() => _TodoListState();
}
class _TodoListState extends State<TodoList> {
final todos = <String>[];
final controller = TextEditingController();
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(
children: [
TextField(controller: controller),
Expanded(
child: ListView.builder(
itemCount: todos.length,
itemBuilder: (context, index) {
final todo = todos[index];
return Dismissible(
key: Key('$todo$index'),
onDismissed: (_) => setState(() => todos.removeAt(index)),
child: ListTile(title: Text(todo)),
);
},
),
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
todos.add(controller.text);
controller.clear();
});
},
child: const Icon(Icons.add),
),
),
);
}
}
Test Implementation (test/todo_list_test.dart):
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:my_app/todo_list.dart';
void main() {
testWidgets('Add and remove a todo item', (WidgetTester tester) async {
// 1. Build the widget
await tester.pumpWidget(const TodoList());
// 2. Verify initial state
expect(find.byType(ListTile), findsNothing);
// 3. Enter text into the TextField
await tester.enterText(find.byType(TextField), 'Buy groceries');
// 4. Tap the add button
await tester.tap(find.byType(FloatingActionButton));
// 5. Rebuild the widget to reflect the new state
await tester.pump();
// 6. Verify the item was added
expect(find.text('Buy groceries'), findsOneWidget);
// 7. Swipe the item to dismiss it
await tester.drag(find.byType(Dismissible), const Offset(500, 0));
// 8. Build the widget until the dismiss animation ends
await tester.pumpAndSettle();
// 9. Verify the item was removed
expect(find.text('Buy groceries'), findsNothing);
});
}