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: ^0.10.0

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:

Libraries

golden_boundary
showcase
showcase_generator
showcase_widgets
showcased

Dart

dart:ui
Built-in types and core primitives for a Flutter application. [...]

Core

dart:async
Support for asynchronous programming, with classes such as Future and Stream. [...]
dart:collection
Classes and utilities that supplement the collection support in dart:core. [...]
dart:convert
Encoders and decoders for converting between different data representations, including JSON and UTF-8. [...]
dart:core
Built-in types, collections, and other core functionality for every Dart program. [...]
dart:developer
Interact with developer tools such as the debugger and inspector. [...]
dart:math
Mathematical constants and functions, plus a random number generator. [...]
dart:typed_data
Lists that efficiently handle fixed sized data (for example, unsigned 8 byte integers) and SIMD numeric types. [...]

VM

dart:io
File, socket, HTTP, and other I/O support for non-web applications. [...]
dart:isolate
Concurrent programming using isolates: independent workers that are similar to threads but don't share memory, communicating only via messages. [...]