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.