A storybook for Flutter widgets.

Overview

Pub Version

Storybook Flutter

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

Getting Started

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) =>
      Storybook(
        children: [
          Story(
            name: 'Flat button',
            padding: EdgeInsets.all(5), // optional padding customization
            background: Colors.red, // optional background color customization
            builder: (_, k) =>
                MaterialButton(
                  onPressed: k.boolean(label: 'Enabled', initial: true) ? () {} : null,
                  child: Text(k.text(label: 'Text', initial: 'Flat button')),
                ),
          ),
          Story(
            name: 'Raised button',
            builder: (_, k) =>
                RaisedButton(
                  onPressed: k.boolean(label: 'Enabled', initial: true) ? () {} : null,
                  color: k.options(
                    label: 'Color',
                    initial: Colors.deepOrange,
                    options: const [
                      Option('Red', Colors.deepOrange),
                      Option('Green', Colors.teal),
                    ],
                  ),
                  textColor: Colors.white,
                  child: Text(k.text(label: 'Text', initial: 'Raised button')),
                ),
          ),
          Story.simple(
            name: 'Input field',
            child: const TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Input field',
              ),
            ),
          ),
        ],
      );
}

Customization

By default, each story is wrapped into:

Container(
  color: story.background,
  padding: story.padding,
  child: Center(child: child),
)

You can override this behavior by providing either wrapperBuilder to the Story or storyWrapperBuilder to the Storybook. In the latest case this wrapper will be applied to each story (of course, you can still override this behavior by providing another wrapperBuilder to individual stories).

CustomStorybook

If you need even more customization, you can use CustomStorybook. You have to provide builder parameter to it where you can define the custom layout. In this case you're responsible for rendering the story, contents and knobs panel.

You can use CurrentStory, Contents and KnobPanel widgets that will render the corresponding data automatically.

As an example of full customization, take a look at storybook_device_preview package that allows to embed storybook into device_preview package with knobs and contents rendered as plugins.

Features and bugs

Please file feature requests and bugs at the issue tracker.

Comments
  • Unsupported operation: Undetermined Nullability with storybook 0.5.0 (or master) and flutter stable

    Unsupported operation: Undetermined Nullability with storybook 0.5.0 (or master) and flutter stable

    Hello, i'm trying to upgrade to v0.5, but i get a weird exception when launching my storybook on chrome. I get the same error when i try to launch the example of this repo (packages/storybook_flutter/example) and this is the stacktrace :

    > example git:(master) ✗ flutter run -d chrome
    Running "flutter pub get" in example...                          1 277ms
    Launching lib/main.dart on Chrome in debug mode...
    Waiting for connection from debug service on Chrome...          
    Unhandled exception:
    Unsupported operation: Undetermined Nullability
    #0      ProgramCompiler._emitFutureOrType (package:dev_compiler/src/kernel/compiler.dart:2857:7)
    #1      ProgramCompiler._normalizeFutureOr (package:dev_compiler/src/kernel/compiler.dart:2730:12)
    #2      ProgramCompiler.visitFutureOrType (package:dev_compiler/src/kernel/compiler.dart:2739:7)
    #3      FutureOrType.accept (package:kernel/ast.dart:9269:42)
    #4      ProgramCompiler._emitType (package:dev_compiler/src/kernel/compiler.dart:2655:54)
    #5      ProgramCompiler._emitTypeNames (package:dev_compiler/src/kernel/compiler.dart:3048:56)
    #6      ProgramCompiler.visitFunctionType (package:dev_compiler/src/kernel/compiler.dart:2937:24)
    #7      ProgramCompiler._emitFunctionTagged (package:dev_compiler/src/kernel/compiler.dart:2611:19)
    #8      ProgramCompiler.visitFunctionExpression (package:dev_compiler/src/kernel/compiler.dart:5866:12)
    #9      FunctionExpression.accept (package:kernel/ast.dart:6735:44)
    #10     ProgramCompiler._visitExpression (package:dev_compiler/src/kernel/compiler.dart:3623:20)
    #11     ProgramCompiler._emitArgumentList (package:dev_compiler/src/kernel/compiler.dart:5315:11)
    #12     ProgramCompiler._emitMethodCall (package:dev_compiler/src/kernel/compiler.dart:4633:16)
    #13     ProgramCompiler.visitInstanceInvocation (package:dev_compiler/src/kernel/compiler.dart:4558:12)
    #14     InstanceInvocation.accept (package:kernel/ast.dart:4536:44)
    #15     ProgramCompiler._visitExpression (package:dev_compiler/src/kernel/compiler.dart:3623:20)
    #16     ProgramCompiler.visitReturnStatement (package:dev_compiler/src/kernel/compiler.dart:4152:38)
    #17     ReturnStatement.accept (package:kernel/ast.dart:7786:43)
    #18     ProgramCompiler._visitStatement (package:dev_compiler/src/kernel/compiler.dart:3551:20)
    #19     ProgramCompiler._emitFunctionScopedBody (package:dev_compiler/src/kernel/compiler.dart:3562:18)
    #20     ProgramCompiler._emitSyncFunctionBody.<anonymous closure> (package:dev_compiler/src/kernel/compiler.dart:3355:17)
    #21     ProgramCompiler._withLetScope (package:dev_compiler/src/kernel/compiler.dart:2235:25)
    #22     ProgramCompiler._withCurrentFunction (package:dev_compiler/src/kernel/compiler.dart:3389:18)
    #23     ProgramCompiler._emitSyncFunctionBody (package:dev_compiler/src/kernel/compiler.dart:3351:17)
    #24     ProgramCompiler._emitFunction (package:dev_compiler/src/kernel/compiler.dart:3165:11)
    #25     ProgramCompiler._emitLibraryFunction (package:dev_compiler/src/kernel/compiler.dart:2591:14)
    #26     MappedIterator.moveNext (dart:_internal/iterable.dart:389:20)
    #27     new _GrowableList._ofOther (dart:core-patch/growable_array.dart:198:26)
    #28     new _GrowableList.of (dart:core-patch/growable_array.dart:152:26)
    #29     new List.of (dart:core-patch/array_patch.dart:50:28)
    #30     Iterable.toList (dart:core/iterable.dart:366:12)
    #31     ProgramCompiler._emitLibraryProcedures (package:dev_compiler/src/kernel/compiler.dart:2557:10)
    #32     ProgramCompiler._emitLibrary (package:dev_compiler/src/kernel/compiler.dart:530:7)
    #33     List.forEach (dart:core-patch/growable_array.dart:403:8)
    #34     ProgramCompiler.emitModule (package:dev_compiler/src/kernel/compiler.dart:394:15)
    #35     JavaScriptBundler.compile (package:frontend_server/src/javascript_bundle.dart:144:33)
    <asynchronous suspension>
    #36     FrontendCompiler.writeJavascriptBundle (package:frontend_server/frontend_server.dart:632:5)
    <asynchronous suspension>
    #37     FrontendCompiler.compile (package:frontend_server/frontend_server.dart:545:9)
    <asynchronous suspension>
    #38     listenAndCompile.<anonymous closure> (package:frontend_server/frontend_server.dart:1105:11)
    <asynchronous suspension>
    the Dart compiler exited unexpectedly.
    Failed to compile application.
    
    Waiting for connection from debug service on Chrome...             36,4s
    

    I didn't have any problem lauching the v0.4.0 on the chrome device. The v0.5.0 is working perfectly on my android device (and i really like the new ControlPanel).

    Thank you for all your work on the storybook and i hope you can help me to get rid of this "Undetermined Nullability" ^^

    > example git:(master) ✗ flutter doctor   
    [✓] Flutter (Channel stable, 2.0.4, on Mac OS X 10.15.7 19H524 darwin-x64, locale fr-FR)
    [✓] Xcode - develop for iOS and macOS
    [✓] Chrome - develop for the web
    [✓] Android Studio (version 4.1)
    [✓] IntelliJ IDEA Ultimate Edition (version 2020.3.3)
    [✓] VS Code (version 1.55.1)
    [✓] Connected device (2 available)
    
    opened by SarukaUsagi 9
  • Freezed update

    Freezed update

    Hi, @ookami-kb

    Could you be so kind to update the version of freezed you are using?

    Currently I'm getting this error: storybook_flutter 0.7.0+1 depends on freezed_annotation ^0.14.1

    This is quite an old feature (current is 1.0.0) and it will be nice to have the most up to date on! Thanks in advance!

    opened by egorikem 7
  • feat: knobs with nullable values

    feat: knobs with nullable values

    Description

    This PR adds the ability for knobs to have a nullable value. This is useful to see what a widget looks like in its default state. To use a nullable knob, the public API is very similar to the existing API, except you use an extra nullable prefix when accessing knobs, ie context.knobs.nullable.boolean rather than context.knobs.boolean. The rest of the public API remains the same.

    For the UI, knobs now have a leading switch to toggle whether or not they're null. If they aren't nullable, this switch is shown but disabled.

    https://user-images.githubusercontent.com/18384371/156241768-554c1293-60c8-4954-bf38-25ab464edbc4.mov

    opened by Kirpal 6
  • Not working context.knobs.sliderInt

    Not working context.knobs.sliderInt

    storybook_flutter: ^0.10.0+1 sample

        return Story(
          name: 'Screens/Scaffold0',
          description: 'Story with scaffold and different knobs..',
          builder: (context) {
            return Scaffold(
                body: SizedBox(
              width: double.infinity,
              child: context.knobs.options<Widget>(
                label: 'Parent',
                initial: Column(
                    children: List.generate(
                  context.knobs.sliderInt(
                    label: 'Items count Column',
                    initial: 2,
                    min: 1,
                    max: 10,
                    description: 'Number of items',
                  ),
                  (_) => child,
                )),
                options: [
                  Option(
                    label: 'Column',
                    value: Column(
                        children: List.generate(
                      context.knobs.sliderInt(
                        label: 'Items count Column',
                        initial: 2,
                        min: 1,
                        max: 10,
                        description: 'Number of items',
                      ),
                      (_) => child,
                    )),
                  ),
                  Option(
                    label: 'Row',
                    value: Row(
                      children: List.generate(
                        context.knobs.sliderInt(
                          label: 'Items count Row',
                          initial: 1,
                          min: 1,
                          max: 10,
                          description: 'Number of items',
                        ),
                        (_) => child,
                      ),
                    ),
                  ),
                  Option(
                    label: 'ListView',
                    value: ListView(
                      children: List.generate(
                        context.knobs.sliderInt(
                          label: 'Items count ListView',
                          initial: 1,
                          min: 1,
                          max: 10,
                          description: 'Number of items',
                        ),
                        (_) => child,
                      ),
                    ),
                  ),
                ],
              ),
            ));
          },
        );
      }```
    opened by statsss 6
  • Nested Menu Structure

    Nested Menu Structure

    Hi @ookami-kb,

    first of all thanks for your work!

    It would be nice to have something like subsections for the menu.

    Example:

    • Basic Components
      • Buttons
        • Primary Button
        • Secundary Button
      • etc.
    opened by bbischler 6
  • Can you guys add multi themes?

    Can you guys add multi themes?

    Hi guys, I was testing your lib, congrats, thats great! I'm here to ask if its possible put more than two themes? How can i do it? I was trying wrap the StoryBook with a Provide but the routes crashes rs

    thanks

    opened by AndersonOli 5
  • Expose App `localizationsDelegates` property

    Expose App `localizationsDelegates` property

    Would it make any sense to expose this App localizationsDelegates in Storybook?

    We are using FlutterI18n and have some widgets configured to use translations, making it impossible for us to use storybook for those widgets.

    Great project!

    opened by DavidRG13 5
  • Navigation in v4 seems broken ?

    Navigation in v4 seems broken ?

    Hi, thanks a lot for your amazing work on this package :) I tried the migration on v4, but all the navigation seems broken :

    `The following assertion was thrown while handling a gesture: Could not find a generator for route RouteSettings("/stories/my-widget", null) in the _WidgetsAppState.

    Make sure your root app widget has provided a way to generate this route. Generators for routes are searched for in the following order:

    1. For the "/" route, the "home" property, if non-null, is used.
    2. Otherwise, the "routes" table is used, if it has an entry for the route.
    3. Otherwise, onGenerateRoute is called. It should return a non-null value for any valid route not handled by "home" and "routes".
    4. Finally if all else fails onUnknownRoute is called. Unfortunately, onUnknownRoute was not set.`

    Did I miss something new ?

    opened by Tiska 4
  • Add support for switching between light and dark theme

    Add support for switching between light and dark theme

    I often want to test whether my components look good in both light and dark mode. This adds a switcher in the app bar, toggling between auto, light and dark mode. This might resolve #14. I had to make some changes to the background colors of the drawer and the default color of a story, to make them look good in light and dark mode.

    opened by Fox32 4
  • feat: add story and knob description fields

    feat: add story and knob description fields

    Description

    This PR adds an optional description field to the Story class all available knobs, along with the logic to display these descriptions (if provided).

    A list of all the changes can be found below. If you have any questions or want additional information, feel free to reach out. Great library, by the way! 😄

    | Story descriptions | Knob descriptions | | --- | --- | |stylebook_pr_changes_1|stylebook_pr_changes_2|

    Summary of changes

    • FEAT: Add description field to stories and all knobs.
    • FEAT: Minor story section text style change.
    • FEAT: Widen story drawer and knobs section to 256px.
    • CHORE: Add docs to all knobs.
    • FIX: Fix bug where desktop users could not enter space in text knob fields.

    Type of Change

    • [x] ✨ New feature (non-breaking change which adds functionality)
    • [x] 🛠️ Bug fix (non-breaking change which fixes an issue)
    • [ ] ❌ Breaking change (fix or feature that would cause existing functionality to change)
    • [ ] 🧹 Code refactor
    • [ ] ✅ Build configuration change
    • [ ] 📝 Documentation
    • [ ] 🗑️ Chore
    opened by jeroen-meijer 3
  • Discussion: Testing Features Support

    Discussion: Testing Features Support

    Thank you for such a great library which I use heavily in all my projects.

    Recently, I've setup golden_toolkit to automatically generate screenshots. However, this doesn't make sense if one is already using this library. The issue is that golden_toolkit requires extensive setup and is limited by widget test limitations. Since our UI is already storyboarded, it makes more sense to run tests from this library instead.

    Do you have any plans to add testing features? There are a few testing features I'm immediately interested in adding to storyboard:

    1. Automatically iterate through all stories and capture screenshots.
    2. Automatically generate different screensize previews.
    3. A knob options wrapper for automatically testing different scenarios of knob values. If the knob values are added to a map, they can be automatically iterated through to generate all the combinations of UI states.

    What are your thoughts?

    opened by searchy2 3
  • Global knob to have values shared between all stories

    Global knob to have values shared between all stories

    Need to have a Knob that keep its value when changing between stories.

    For example, a Font Size options knob that is present on all stories:

    context.knobs.options(
          label: 'Font Size',
          initial: '12',
          options: [
            const Option<String>(
              label: '10',
              value: '10',
            ),
            const Option<String>(
              label: '11',
              value: '11',
            ),
            const Option<String>(
              label: '12',
              value: '12',
            ),
            const Option<String>(
              label: '13',
              value: '13',
            ),
            const Option<String>(
              label: '14',
              value: '14',
            )
          ],
        );
    
    Screen Shot 2022-12-19 at 12 23 10 pm

    The "issue" is when I select a different value, let's say 11, and navigates to a different story, the "Font Size" knob value gets reset to its initial value. So there is a need to select the knob again.

    Is there a way I could declare a global knob of "settings" or have its initial value to be kept between all stories??

    opened by caiovisk 0
  • Searchable contents

    Searchable contents

    Added TextField on top of expansion list with categorized stories for both types of panels (left side and popup). I decided to add feature to existed ContentsPlugin with no possibility to disable functionality.

    Resolve: https://github.com/ookami-kb/storybook_flutter/issues/71

    opened by Filiponesco 0
  • Hot reload not work in version 0.11.2+2 ?

    Hot reload not work in version 0.11.2+2 ?

    same problem as #65 ,

    storybook_fluter info:

    storybook_flutter:
        dependency: "direct dev"
        description:
          name: storybook_flutter
          url: "https://pub.dartlang.org"
        source: hosted
        version: "0.11.2+2"
    

    flutter info:

    [✓] Flutter (Channel stable, 3.3.4, on macOS 12.6 21G115 darwin-x64, locale en-US)
        • Flutter version 3.3.4 on channel stable at /usr/local/Caskroom/flutter/3.0.5/flutter
        • Upstream repository https://github.com/flutter/flutter.git
        • Framework revision eb6d86ee27 (11 days ago), 2022-10-04 22:31:45 -0700
        • Engine revision c08d7d5efc
        • Dart version 2.18.2
        • DevTools version 2.15.0
    
    opened by zhanglix 0
  • In correct resolution for device frame (iPhone 12)

    In correct resolution for device frame (iPhone 12)

    When we preview the screen on an iPhone 12 we get this: 2022-09-02 17_49_10-Window

    Happens after updating to 0.11.1. The version where it worked correct was 0.10.1.

    Works for iPhone mini and max: 2022-09-02 17_49_18-Window 2022-09-02 17_49_25-Window

    opened by matthijs166 1
Owner
Kirill Bubochkin
Mobile/Web developer. Head of Applications at Mews.
Kirill Bubochkin
Widgets intermediate - Intermediate Widgets For Flutter

Intermediate Widgets 4-MODUL 5-LESSON Alert Dialog (Android & IOS) Drawer Single

Tukhtamurodov Sardorbek 2 Feb 6, 2022
Target the specific design of Material for Android and Cupertino for iOS widgets through a common set of Platform aware widgets

Flutter Platform Widgets This project is an attempt to see if it is possible to create widgets that are platform aware. Currently in order to render t

null 1.3k Jan 4, 2023
Target the specific design of Material for Android and Cupertino for iOS widgets through a common set of Platform aware widgets

Flutter Platform Widgets This project is an attempt to see if it is possible to create widgets that are platform aware. Currently in order to render t

null 1.3k Jan 4, 2023
Arisprovider - A mixture between dependency injection (DI) and state management, built with widgets for widgets

A mixture between dependency injection (DI) and state management, built with wid

Behruz Hurramov 1 Jan 9, 2022
A Flutter widget for rendering static html as Flutter widgets (Will render over 80 different html tags!)

flutter_html A Flutter widget for rendering HTML and CSS as Flutter widgets. Screenshot 1 Screenshot 2 Screenshot 3 Table of Contents: Installing Curr

Matthew Whitaker 1.5k Jan 5, 2023
A Flutter widget for rendering HTML and CSS as Flutter widgets

flutter_html A Flutter widget for rendering HTML and CSS as Flutter widgets. Screenshot 1 Screenshot 2 Screenshot 3 Table of Contents: Installing Curr

Vishal Raj 1 Dec 15, 2021
Recipes app in flutter using API to get data. Amazing Recipes app UI in Flutter using dart with simple widgets.

Food Recipe App In Flutter Using API'S Recipe App in Flutter Subscribe Our YouTube Channel. Visit Website Demo OutPut Images ## ?? Links Getting Start

Habib ullah 2 Dec 26, 2022
custom flutter candies(widgets) for you to build flutter app easily, enjoy it

Flutter Custom flutter candies(widgets) for you to easily build flutter app, enjoy it waterfall_flow A Flutter grid view easy to build waterfall flow

FlutterCandies 792 Nov 23, 2022
A flutter appliction listing all the widgets covered in Flutter widget of the week playlist.

Flutter Widget Guide A flutter appliction listing all the widgets covered in Flutter widget of the week playlist Get the app Now featured on itsallwid

Annsh Singh 371 Dec 28, 2022
Neste meu primeiro contato com flutter, foi feito um simples app para testar os principais widgets do flutter e entender a peculiaridade de cada um.

primeiro_projeto A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started

Gustavo Andrade 2 Sep 17, 2022
Implements GTK Widgets, themes and titlebar buttons in Flutter. Based on the GNOME HIG

GTK ❤️ Flutter Unofficial implementation of GTK Widgets, themes and titlebar buttons in Flutter. Based on the GNOME Human Interface Guidelines. Featur

Prateek SU 164 Dec 26, 2022
A Flutter package for inspecting widgets.

inspector A Flutter package for inspecting widgets. Also comes with an eyedropper functionality. Useful for debugging widgets and for QA testing. Supp

Erzhan 25 Sep 23, 2022
Set of Flutter widgets built using physics based animations.

Elastic Widgets Set of Flutter widgets built using physics based animations. Widgets Seek Bar Range Picker Installation Add this to your package's pub

Alireza Abiri 76 Dec 4, 2021
This repo is for anything that can be reusable in flutter like custom widgets 🟥, animations 🌟and more

Ease This packa is for anything that can be reusable in flutter like custom widgets ?? , animations ?? and more. Features 1-custom text widget to ease

Abdelrahman Mostafa Elmarakby 91 Dec 3, 2022
This is a tutorial for all widgets in the flutter. It contain code, articles.

Flutter Widgets ❤️ Star ❤️ the repo to support the project or ?? Follow Me.Thanks! Facebook Page Twitter QQ Group Developer Flutter Open NieBin 963828

Flutter开源社区 335 Dec 3, 2022
RelativeScale is a simple custom sizing system for flutter widgets to achieve the same physical sizes across different devices.

RelativeScale is a simple custom sizing system for flutter widgets to achieve the same physical sizes across different devices. Usage It is VERY easy

xamantra 19 Nov 25, 2022
This repository contains the Syncfusion Flutter UI widgets examples and the guide to use them.

Syncfusion Flutter examples This repository contains awesome demos of Syncfusion Flutter UI widgets. This is the best place to check our widgets to ge

Syncfusion 1.6k Jan 4, 2023
Flutter widgets implementing Flx Paper Design

Paper is flutter widgets implementing Flx Paper Design. Installing Add a lines like this to your pubspec.yaml. dependencies: paper: git: u

Flx Team 3 Nov 21, 2021
Flutter Scrollable Widgets like ListView,GridView or powerful CustomScrollView can't nest inner scrollview

Introduction Flutter Scrollable Widgets like ListView,GridView or powerful CustomScrollView can't nest inner scrollview. If Nested, inner scrollview w

jaysonss 5 Aug 28, 2022