showcase 0.6.0 copy "showcase: ^0.6.0" to clipboard
showcase: ^0.6.0 copied to clipboard

Generate documentation screenshots of your widgets by just annotating them.

Showcase

Pub Package CircleCI

Generate documentation screenshots of your widgets.


Installation #

Add the following to your pubspec.yaml file:

dev_dependencies:
  showcase: <1.0.0

then run:

flutter packages get

Then you can either annotate the widgets you want to have showcased or manually create a test file with multiple widgets:

With annotations #

Add another dependency to your pubspec.yaml file:

dev_dependencies:
  build_runner: ^1.2.8

Just annotate the widgets you want with @Showcased:

import 'package:showcase/showcase.dart';

@Showcased()
class MyWidget extends StatelessWidget {
  // ...
}

The builder will generate a .showcased_test.dart test file for each annotated class file. Just run:

flutter packages pub run build_runner build

Manually testing #

Create a test file with the following:

import 'package:flutter_test/flutter_test.dart';
import 'package:showcase/showcase.dart';

void main() {
  group('Showcase!', () {
    showcaseWidgets([]);
  });
}

Replace the empty list with a collection of widgets. showcaseWidgets also have some options you can tweak.

Then it's just a matter of running flutter test and have your screenshots generated on ./showcase/ (or another output directory you had configured).

Example showcase #

The example app provided generates the following showcase image:

4
likes
40
pub points
52%
popularity

Publisher

verified publisherborges.dev

Generate documentation screenshots of your widgets by just annotating them.

Repository (GitHub)
View/report issues

License

MIT (LICENSE)

Dependencies

analyzer, build, dart_style, flutter, flutter_test, glob, http, source_gen, yaml

More

Packages that depend on showcase