flutter-add-widget-preview — Skills

What it does

Preview Guidelines

Handling Limitations

Imports: Always import package:flutter/widgetpreviews.dart to access the preview annotations.

Custom Annotations: Extend the Preview class to create custom annotations that inject common properties (e.g., themes, wrappers) across multiple widgets.

Public Callbacks: Ensure all callback arguments provided to preview annotations are public and constant to satisfy code generation requirements.

[ ] Import package:flutter/widgetpreviews.dart.

[ ] Identify a valid target (top-level function, static method, or parameter-less public constructor).

flutter add widget preview

Source

Repository: https://github.com/flutter/skills

flutter-add-widget-preview FAQ

What does the flutter-add-widget-preview skill do?

Adds interactive widget previews to the project using the previews.dart system. Use when creating new UI components or updating existing screens to ensure consistent design and interactive testing. Preview Guidelines Handling Limitations

What does flutter-add-widget-preview require?

4. If only the local widget state needs resetting: Click the individual hot restart button on the specific preview card.

How do I install flutter-add-widget-preview?

Run: npx -y skills add https://github.com/flutter/skills --skill flutter-add-widget-preview --agent claude-code — the source lives at github.com/flutter/skills.

Maintain flutter-add-widget-preview?

Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.

[![flutter-add-widget-preview on getagentictools](https://getagentictools.com/badge/skills/flutter-skills-flutter-add-widget-preview.svg)](https://getagentictools.com/skills/flutter-skills-flutter-add-widget-preview?ref=badge)

npx agentictools info skills/flutter-skills-flutter-add-widget-preview

The second line is the CLI lookup for this page — handy in READMEs and docs.