Dummies

What are dummies?

Dummies are dart classes that provide the dummy content of your sample (or samples). For working with dummies, @Preview annotations require an extra configuration.

Complex page catalog (demo)

Creating previews for complex widgets is also easy. Let's check it with this widget.

Include the @Preview annotation:

gs_image.dart

import 'package:cached_network_image/cached_network_image.dart';
import 'package:catalog/catalog.dart';
import 'package:flutter/material.dart';
import 'package:landa/data/model/profile.dart';

@Preview(
  id: 'GsImagePreview',
  path: 'images/gsImage',
  description: 'Image builder for Cloud Storage files',
  usesDummies: true,
  dummyParameters: [
    'profile',
    'size',
    'height',
    'width',
    'elevation',
  ],
)
class GsImage extends StatefulWidget {
  final Profile? profile;
  final double? height;
  final double? width;
  final double? size;
  final double elevation;

  const GsImage({
    this.profile,
    this.size,
    this.height,
    this.width,
    this.elevation = 0.0,
    Key? key,
  }) : super(key: key);

  @override
  GsImageState createState() => GsImageState();
}

class GsImageState extends State<GsImage> {

  @override
  Widget build(BuildContext context) {
     return Container(...); // any widget
  }
}

Notice new @Preview parameters included:

usesDummies: Enables the use of dummy files in your widget. Dummy files are generated after running dart run catalog:preview.
dummyParameters: Widget parameters that will be mocked from your dummy file.

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

Notice the suffix preview is defined in pubspec.yaml

Prepare dummies

dart run catalog:preview

After running the preview command, a dummy file is generated if it does not exist.

gs_image.dummy.dart

/// AUTOGENERATED FILE.
///
/// Use this file for modify the preview of GsImagePreview
///

import 'package:catalog/catalog.dart';

class GsImageDummy extends PreviewDummy {
  @override
  List<Dummy> get dummies => [];
}

Every Dummy element you include in the dummies variable is displayed as a different sample of your widget preview.

gs_image.dummy.dart

/// AUTOGENERATED FILE.
///
/// Use this file for modify the preview of GsImagePreview
///

import 'package:catalog/catalog.dart';
import 'package:landa/data/model/profile.dart';

class GsImageDummy extends PreviewDummy {
  @override
  List<Dummy> get dummies => [
        Dummy(
          parameters: {
            'profile': Profile().fromJson(
              {
                'id': '1107d2a893dd295e57f',
                'name': 'Efra Espada',
                'username': 'efraespada',
              },
            ),
            'size': 150,
            'height': 150,
            'width': 150.0,
            'elevation': 2.0,
          },
        ),
      ];
}