witwash / storybook_flutter

A storybook for Flutter widgets.

Storybook Flutter

A cross-platform storybook for showcasing widgets. It should work at all platforms supported by Flutter.

• Demo version

Getting Started

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) =>
      Storybook(
        stories: [
          Story(
            name: 'Screens/Counter',
            description: 'Demo Counter app with about dialog.',
            builder: (context) => CounterPage(
              title: context.knobs.text(label: 'Title', initial: 'Counter'),
              enabled: context.knobs.boolean(label: 'Enabled', initial: true),
            ),
          ),
          Story(
            name: 'Widgets/Text',
            description: 'Simple text widget.',
            builder: (context) => const Center(child: Text('Simple text')),
          ),
        ],
      );
}

Customization

By default, each story is wrapped into MaterialApp.

You can override this behavior by providing either wrapperBuilder to the Storybook. You can either use one of the default ones (materialWrapper/cupertinoWrapper) or provide a fully custom wrapper. In the latest case, make sure to use the child widget that will contain the story.

Plugins

Almost all the functionality is provided by plugins. Even contents and knobs are plugins (although they are first-party plugins).

Plugins documentation is TBD, but you can take a look at the existing first-party plugins: ContentsPlugin, DeviceFramePlugin, KnobsPlugin, ThemModePlugin.

Golden tests

You can automatically test your stories by using storybook_flutter_test package:

1. Add it to dev_dependencies:

   dev_dependencies:
     storybook_flutter_test: any

2. Create test file, e.g. storybook_test.dart.

3. Add the following content there:

   void main() => testStorybook(
       storybook,
       layouts: [
         (
           device: Devices.ios.iPhone13,
           orientation: Orientation.portrait,
           isFrameVisible: true,
         ),
         (
           device: Devices.ios.iPadPro11Inches,
           orientation: Orientation.landscape,
           isFrameVisible: true,
         ),
         (
           device: Devices.android.samsungGalaxyA50,
           orientation: Orientation.portrait,
           isFrameVisible: true,
         ),
       ],
     );

4. Generate golden images by running flutter test --update-goldens --tags=storybook.

Features and bugs

Please file feature requests and bugs at the issue tracker.