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

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';
import 'package:landa/utils/blurhash.dart';
import 'package:landa/utils/loading_indicator.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;
  final BorderRadiusGeometry? borderRadius;

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

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

class GsImageState extends State<GsImage> {

  @override
  Widget build(BuildContext context) {
    var url = widget.profile?.gsImageProfile;
    if (url == null) {
      return Container();
    }
    var borderRadius = widget.borderRadius ??
        BorderRadius.all(
          Radius.circular(widget.size == null ? 0 : widget.size! / 2),
        );

    var blurHash = widget.profile!.blurHash;

    return SizedBox(
      height: widget.size,
      width: widget.size,
      child: Material(
        elevation: widget.elevation,
        borderRadius: borderRadius,
        clipBehavior: Clip.hardEdge,
        child: CachedNetworkImage(
          placeholder: (context, url) => blurHash != null
              ? BlurHash(hash: blurHash)
              : Stack(
                  children: const [
                    Align(
                      alignment: Alignment.center,
                      child: LoadingIndicator(),
                    ),
                  ],
                ),
          imageUrl: url,
          width: widget.width ?? widget.size,
          height: widget.height ?? widget.size,
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}

Notice new @Preview parameters included:

• usesDummies: Enables the use of dummy files in your widget. Dummy files are generated after running flutter pub 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

flutter pub run catalog:preview && dart format lib/*

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,
          },
        ),
      ];
}