Previewing Flutter Widgets

Contents

• Preview Guidelines
• Handling Limitations
• Workflows
• 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