Previews

What are previews?

Previews are widgets. These widgets contain a sample (or multiple-different samples) of your widget.

Its purpose is to offer a quick view of your widget. You can mock any state your widget could need.

Create a basic page for a widget demo

Creating pages for your catalog is easy. After including a few parameters, you'll have a complete page sample.

Include the @Preview annotation:

sized_container.dart

import 'package:catalog/catalog.dart';
import 'package:flutter/material.dart';

@Preview(
  description: 'Container with a max width',
  parameters: ['width', 'child'],
)
class SizedContainer extends StatelessWidget {
  final double width;
  final Widget child;

  const SizedContainer({
    super.key,
    this.width = 500,
    required this.child,
  });

  @override
  Widget build(BuildContext context) => Container(
        constraints: BoxConstraints(
          maxWidth: width,
        ),
        child: child,
      );
}

description: Description of your widget page.
parameters: List of the parameters that form the constructor of our widget (at least the mandatory ones).

Generate the preview and dummy files

Catalog works with .preview. and .dummy. files. These files are generated from your widget.

dart run catalog:preview

your_widget_folder
    |
    |-- catalog
    |   |
    |   |-- dummy
    |   |   |
    |   |   |-- sized_container.dummy.dart      <-- dummy created (only created if not exist)
    |   |   |-- other_container.dummy.dart      <-- dummy created (only created if not exist)
    |   |   
    |   |-- preview
    |       |
    |       |-- sized_container.preview.dart        <-- preview created (always regenerated) 
    |       |-- other_container.preview.dart        <-- preview created (always regenerated) 
    |
    |--sized_container.dart                     <-- widget file
    |--other_container.dart                     <-- widget file