flutter-add-widget-preview
Previewing Flutter Widgets
Contents
Preview Guidelines
Use the Flutter Widget Previewer to render widgets in real-time, isolated from the full application context.
- Target Elements: Apply the
@Previewannotation to top-level functions, static methods within a class, or public widget constructors/factories that have no required arguments and return aWidgetorWidgetBuilder. - Imports: Always import
package:flutter/widget_previews.dartto access the preview annotations. - Custom Annotations: Extend the
Previewclass to create custom annotations that inject common properties (e.g., themes, wrappers) across multiple widgets. - Multiple Configurations: Apply multiple
@Previewannotations to a single target to generate multiple preview instances. Alternatively, extendMultiPreviewto encapsulate common multi-preview configurations. - Runtime Transformations: Override the
transform()method in customPrevieworMultiPreviewclasses to modify preview configurations dynamically at runtime (e.g., generating names based on dynamic values, which is impossible in aconstcontext).
Handling Limitations
More from flutter/skills
flutter-building-layouts
Builds Flutter layouts using the constraint system and layout widgets. Use when creating or refining the UI structure of a Flutter application.
10.6Kflutter-architecting-apps
Architects a Flutter application using the recommended layered approach (UI, Logic, Data). Use when structuring a new project or refactoring for scalability.
10.4Kflutter-animating-apps
Implements animated effects, transitions, and motion in a Flutter app. Use when adding visual feedback, shared element transitions, or physics-based animations.
9.6Kflutter-managing-state
Manages application and ephemeral state in a Flutter app. Use when sharing data between widgets or handling complex UI state transitions.
9.6Kflutter-theming-apps
Customizes the visual appearance of a Flutter app using the theming system. Use when defining global styles, colors, or typography for an application.
9.5Kflutter-implementing-navigation-and-routing
Handles routing, navigation, and deep linking in a Flutter application. Use when moving between screens or setting up URL-based navigation.
9.3K