flutter-add-widget-preview
Adds interactive widget previews to the project using the previews.dart system
by flutterFree
Description
flutter-add-widget-preview is an agent skill that adds interactive widget previews to a Flutter project using the previews.dart system and the Flutter Widget Previewer. The previewer renders a widget in real time, isolated from the full application, so a component can be checked as it is built. The skill explains where to put the @Preview annotation: on top-level functions, on static methods inside a class, or on public widget constructors and factories that take no required arguments and return a Widget or WidgetBuilder. It says to import package:flutter/widget_previews.dart to access the annotations. For shared settings such as a theme or a wrapper, you can extend the Preview class to make a custom annotation. For several variations of one widget, you can apply multiple annotations to one target, or extend MultiPreview to group a common set. The skill also covers runtime transformations, by overriding the transform method in a custom preview to change a configuration on the fly. The skill is meant for agents creating new UI components or updating existing screens, so the screens can be checked in the previewer. It is part of Flutter's agent-plugins repository and is added to a compatible agent with the skills command.…
Highlights
- Adds @Preview annotations to widgets
- Custom annotations for shared themes and wrappers
- Multiple previews per widget with MultiPreview
- Runtime changes through transform()
Ratings & Reviews
No ratings yet
Be the first to rate flutter-add-widget-preview.
People also visit
dart-flutter-patterns
Production-ready Dart and Flutter patterns covering null safety
flutter-dart-code-review
Library-agnostic Flutter/Dart code review checklist covering widget best
flutter-implement-json-serialization
Create model classes with `fromJson` and `toJson` methods using `dart:convert`
flutter-apply-architecture-best-practices
Architects a Flutter application using the recommended layered approach
flutter-add-widget-preview FAQ
What does this skill add?
Interactive widget previews in a Flutter project, using the previews.dart system and the Flutter Widget Previewer.
Which code can take a preview?
Top-level functions, static methods in a class, and public widget constructors or factories with no required arguments that return a Widget or WidgetBuilder.
Can I preview several variations?
Yes. Apply several @Preview annotations to one target, or extend MultiPreview to group them.
How do I share a theme across previews?
Extend the Preview class to create a custom annotation that adds the theme or wrapper.
How do I install it?
Run: npx skills add https://github.com/flutter/agent-plugins --skill flutter-add-widget-preview
What security audits has it passed?
Gen Agent Trust Hub, Socket and Snyk all passed.
What are the best flutter-add-widget-preview alternatives?
Popular alternatives to flutter-add-widget-preview include dart-flutter-patterns, flutter-dart-code-review and flutter-implement-json-serialization. See all flutter-add-widget-preview alternatives