← ClaudeAtlas

flutter-add-widget-previewlisted

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.
izo/Ulk · ★ 1 · Code & Development · score 68
Install: claude install-skill izo/Ulk
# Previewing Flutter Widgets ## Contents - [Preview Guidelines](#preview-guidelines) - [Handling Limitations](#handling-limitations) - [Workflows](#workflows) - [Examples](#examples) ## Preview Guidelines Use the Flutter Widget Previewer to render widgets in real-time, isolated from the full application context. - **Target Elements:** Apply the `@Preview` annotation to top-level functions, static methods within a class, or public widget constructors/factories that have no required arguments and return a `Widget` or `WidgetBuilder`. - **Imports:** Always import `package:flutter/widget_previews.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. - **Multiple Configurations:** Apply multiple `@Preview` annotations to a single target to generate multiple preview instances. Alternatively, extend `MultiPreview` to encapsulate common multi-preview configurations. - **Runtime Transformations:** Override the `transform()` method in custom `Preview` or `MultiPreview` classes to modify preview configurations dynamically at runtime (e.g., generating names based on dynamic values, which is impossible in a `const` context). ## Handling Limitations Adhere to the following constraints when authoring previewable widgets, as the Widget Previewer runs in a web environment: - **No Native APIs:** Do not use native plugins or APIs from `dart