This skill enables you to add `flutter_driver` support to a Flutter application, allowing for widget control and screenshot capture. It's designed for developers building Flutter applications who want to automate testing and capture visual feedback.
$ npx skills add https://github.com/rodydavis/skills --skill flutter-control-and-screenshotThis skill adds flutter_driver support to your Flutter application, enabling automated widget control and screenshot capture through MCP integration. Use it to automate UI testing workflows, verify visual output programmatically, and validate app behavior across different states. The skill integrates flutter_driver functionality into your development environment, allowing you to drive your Flutter app's widgets and capture visual evidence of test results. This is particularly valuable for CI/CD pipelines, regression testing, and visual validation during development cycles.
Install the skill using the command provided and ensure your Dart MCP server is running.
Control Flutter widgets programmatically
Capture screenshots for testing purposes
Automate end-to-end testing of Flutter apps
Debug visual issues in Flutter apps
$ npx skills add https://github.com/rodydavis/skills --skill flutter-control-and-screenshotgit clone https://github.com/rodydavis/skillsCopy the install command above and run it in your terminal.
Launch Claude Code, Cursor, or your preferred AI coding agent.
Use the prompt template or examples below to test the skill.
Adapt the skill to your specific use case and workflow.
Add `flutter_driver` support to my Flutter app [APP_NAME] in [INDUSTRY] to enable automated testing and screenshot capture. The app uses [FRAMEWORK_LIBRARIES] and targets [PLATFORM]. Generate the necessary code to set up the driver extension and ensure it can interact with key widgets like [WIDGET_1], [WIDGET_2], and [WIDGET_3]. Also, provide instructions for capturing screenshots programmatically during tests.
# Flutter Driver Setup for E-Commerce App
## Key Components Added
### 1. Driver Extension Setup
```dart
import 'package:flutter_driver/driver_extension.dart';
import 'package:[APP_NAME]/main.dart' as app;
void main() {
// Enable Flutter Driver extension
enableFlutterDriverExtension(handler: (String message) async {
if (message == 'capture_screenshot') {
// Capture screenshot logic here
return 'Screenshot captured';
}
return 'Unknown command';
});
app.main();
}
```
### 2. Test Configuration
```dart
import 'package:flutter_driver/flutter_driver.dart';
import 'package:test/test.dart';
void main() {
group('E-Commerce App Tests', () {
late FlutterDriver driver;
setUpAll(() async {
driver = await FlutterDriver.connect();
});
tearDownAll(() async {
driver.close();
});
test('Verify product list loads', () async {
await driver.waitFor(find.text('Featured Products'));
await driver.tap(find.text('Add to Cart'));
await driver.waitFor(find.text('Item added!'));
});
test('Capture product page screenshot', () async {
await driver.tap(find.text('Products'));
await driver.waitFor(find.text('Laptop'));
// Trigger screenshot
await driver.requestData('capture_screenshot');
});
});
}
```
### 3. Screenshot Utility
```dart
import 'dart:io';
import 'package:flutter/services.dart';
import 'package:image/image.dart' as img;
Future<void> captureScreenshot() async {
final bytes = await FlutterDriver.instance.screenshot();
final image = img.decodeImage(bytes)!;
final screenshot = img.encodePng(image);
await File('screenshots/${DateTime.now().millisecondsSinceEpoch}.png')
.writeAsBytes(screenshot);
}
```
## Next Steps
- Run tests with: `flutter drive --driver=test_driver/app.dart --target=integration_test/app_test.dart`
- Review screenshots in the `screenshots/` directory
- Integrate with CI/CD pipeline for automated testingTake a free 3-minute scan and get personalized AI skill recommendations.
Take free scan