storybook_flutter

Description:

storybook flutter

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')),
),
],
);
}
copied to clipboard
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:


Add it to dev_dependencies:
dev_dependencies:
storybook_flutter_test: any
copied to clipboard


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


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,
),
],
);
copied to clipboard


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


Features and bugs #
Please file feature requests and bugs at the issue tracker.