skills.rest
aashahin
aashahinCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

flutter-add-widget-preview

Adds interactive Flutter widget previews using the @Preview annotation system.

Updated Jun 22, 2026
Search Tags:#ui components#flutter#ide#dart#annotation#hot reload#widget preview
One-click install
npx skills add https://github.com/aashahin/ai-skills --skill flutter-add-widget-preview-aashahin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: flutter-add-widget-preview
Source: https://github.com/aashahin/ai-skills/tree/main/flutter-add-widget-preview
Command: npx skills add https://github.com/aashahin/ai-skills --skill flutter-add-widget-preview-aashahin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Developing Flutter UI components without visual feedback requires running the full application, slowing iteration. This Skill adds interactive widget previews so components can be rendered and tested in isolation from the app context. ## Core Features & Use Cases - Preview Annotation Setup: Applies the @Preview annotation to top-level functions, static methods, or parameter-less constructors, with configuration for name, group, size, theme, and brightness. - Custom and Multi-Preview Classes: Creates custom Preview and MultiPreview subclasses with runtime transform() overrides to generate themed or multi-configuration previews. - Limitation Handling: Guides around web-environment constraints such as no dart:io/dart:ffi usage, package-based asset paths, and public constant callbacks. - Use Case: When building a new design-system component, annotate it with @Preview, launch the Widget Previewer via IDE or flutter widget-preview start, and iterate with hot restart until the design matches. ## Quick Start Add an interactive preview to my Flutter widget using the @Preview annotation and show me how to launch the Widget Previewer.

Frequently Asked Questions about flutter-add-widget-preview

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a widget preview in Flutter?▼

Import package:flutter/widget_previews.dart and apply the @Preview annotation to a top-level function, static method, or public constructor with no required arguments that returns a Widget. Configure parameters like name, group, size, and brightness as needed.

How to launch the Flutter Widget Previewer?▼

In Android Studio, IntelliJ, or VS Code with Flutter 3.38+, the Widget Previewer starts automatically in the Flutter Widget Preview sidebar tab. From the command line, run flutter widget-preview start in the project root to open it in Chrome.

Can Flutter widget previews use dart:io or native plugins?▼

No. The Widget Previewer runs in a web environment, so widgets with transitive dependencies on dart:io or dart:ffi throw exceptions when invoked. Use conditional imports to mock or bypass native APIs in preview mode.

Why does my Flutter widget preview fail to load assets?▼

Assets loaded via dart:ui fromAsset APIs must use package-based paths such as packages/my_package_name/assets/my_image.png instead of relative paths like assets/my_image.png. The previewer's web environment resolves assets differently than a native app.

How do I create multiple preview configurations for one widget?▼

Apply multiple @Preview annotations to the same target, or extend the MultiPreview class to encapsulate common configurations. Override transform() to modify preview properties dynamically at runtime, such as generating names from brightness values.

Related Skills

Explore More Software Engineering Skills→
yash-gargyash-garg

flutter-add-widget-preview

Add interactive Flutter widget previews with annotations and configurations.

Community
Intermediate
telum-aitelum-ai
2

visual-testing-mobile-flutter

Automate Flutter visual regression testing with Golden Tests, Alchemist, and Fastlane.

Official
Intermediate
SnakeOSnakeO
9

debug:flutter

Diagnose Flutter errors across Android, iOS, and Web with DevTools.

Community
Intermediate
aroidoaroido

ast-code-analysis

Analyze TypeScript/React codebases for circular references and cyclomatic complexity.

Official
Intermediate