A user wished for an inspector to get information about a widget. For instance, to check for margins. This feature could be similar to the flutter inspector.

How to reproduce

1. Create a Folder with a WidgetElement
2. Start the Widgetbook
3. Open the Folder so its expanded
4. Hot reload the app
5. Observe that the Folder is collapsed after hot reload completed.

have just come across this project and was wondering if you plan on adding any interactive "story" functionality ?

e.g change widget inputs within the widgetbook interface on the fly

the screenshot at https://pub.dev/packages/widgetbook is not showing because we reached the free limit of bandwidth at the widgetbook repository.

Options to solve the problem:

1. upgrade the plan
2. add as regular file instead of git lfs

I just want to inform you it's not possible to request a download from the following homepage: https://widgetbook.io.

The following error occurred after press on Get Access:
Oops! Something went wrong while submitting the form.

The following error is visible in the console:

GET https://firecrown.us1.list-manage.com/subscribe/post-json?u=34ac9ff90651cadf6f31835ab&id=363df7e9b9&c=jQuery351047704463576119527_1634213232985&FNAME=Markus&SNAME=Krebs&EMAIL=markuskrebs93%40gmail.com&b_34ac9ff90651cadf6f31835ab_363df7e9b9=&_=1634213232986 net::ERR_ABORTED 503

A user wished for a pixel grid to be able to approximate distances easier. An option to customise the distance between each grid line is required.

How to reproduce

1. create a story with a builder that prints, e.g. a number (1)
2. select the story (on selection the number is printed)
3. change the print of the story to another number (2)
4. hot reload the Widgetbook
5. observe that the old number (1) is printed instead of (2)

Workaround

To render the hot reloaded story, deselect the story (e.g., by selecting another story) and select the hot reloaded story again.

Problem

The CanvasCubit which provides the currently selected story does not get updated when the currently selected story is changed (and then hot reloaded). Therefore, a render (and a print) with an the old builder function is invoked.

Currently a bunch of scenarios are not tested. Tests need to be meaningful and cover at least 95% of the code. Currently the coverage for codecov is set to 55% so the test action will pass.

This issue is primarily a reminder that the coverage for codecov is set to 55% and must be increased once additional tests are added.

Current test coverage:

Collapsing and expanding Navigation Panel elements takes time for lange projects. especially if one wants to go through stories fast.

Suggested solution:

Include a button that makes expanding and collapsing the subtree of a navigation element easier.

When theme properties are set, I just see a "No theme defined" in the main preview window, yet the lightTheme and darkTheme properties on Widgetbook are not marked as required.
I worked around this by setting:

lightTheme: ThemeData.light(),
darkTheme: ThemeData.dark(),

But really I think they should either be set to required in the constructor or otherwise sensible default like the above should be used.

Takes approx 1.6MB and should be reduced to improve loading of the documentation and reduce Git LFS bandwidth utilisation.

A CI/CD badge helps to identify if the newest version is working properly.

I think you miss a showcase in your docs.
After 15 minutes reading and digging into the example I still couldn't figure out how the library is working.
You should have a video or GIFs or something to show what the actual goal is (or what the "output" of the example in your repo looks like).

Mobile

The Device class misses a bunch of mobile apple devices. The proposed mobile devices are defined here: Device Screen Sizes and Orientations.

Desktop

In addition, the following desktop devices need to be added

• MacBooks
  • 13.3"
  • 14"
  • 15"
  • 16"
• iMac
  • Slim Unibody iMac (2012, 2013)
    • 21.5"
    • 27"
  • Retina iMac (2014, 2015)
    • 21.5"
    • 27"
  • Apple M1 (2021)
    • 24"
• Pro Display XDR

For now it's unclear how the different scaling factors of Desktop devices should be implemented.

An user wished for a search bar to be able to quickly find the desired widget in their long list of widgets.

Currently I don't see a way to create or specify a category/folder for a use case.

The path of an Organizer should be unique. Otherwise elements with a duplicate name are hidden. This might cause problems when hot reloading stories.

For instance, it might happen that a developer copies one or multiple Storys, but forgets to change the name. Therefore, one folder has multiple Storys with the same name. Therefore, multiple Organizers with the same path exist. This can cause the preview to show a different Widget on hot reloading since CanvasCubit might match a Story with the same path but different rendering.

Suggestion

If multiple Storys exist, a warning should be displayed. This warning should state that one or multiple elements in the navigation tree result in the same path and are therefore hidden.

Some widgets might depend on Theme.of(context).brightness. Unfortunately, the widgetbook package does not set the brightness correctly.

Suggested solution

inherit the brightness of the rendered app from the brightness of widgetbook:

injectedTheme.copyWith(brightness: Theme.of(context).brightness, ... )

Since the functions annotated with @WidgetbookStory are just imported in the final .widgetbook.dart file a naming conflict occurs iff multiple methods annoted with @WidgetbookStory and having the method name are defined.

The error thrown looks like this:

lib/app.widgetbook.dart:49:45: Error: 'mealDetailShort' is imported from both 'package:meal_app/widgets/test_file.dart' and 'package:meal_app/widgets/meal_detail.dart'.
builder: (context) => mealDetailShort(context),
^^^^^^^^^^^^^^^
lib/app.widgetbook.dart:53:45: Error: 'mealDetailShort' is imported from both 'package:meal_app/widgets/test_file.dart' and 'package:meal_app/widgets/meal_detail.dart'.
builder: (context) => mealDetailShort(context),

Workaround

• Rename the Story-defining methods so each method name imported into .widgetbook.dart is unique.

Proposed changes

• Use named imports instead of plain imports
  • this allows the developer to reuse the names of the Story-defining methods since they can be differentiated by their namespaces

Please document how to use widgetbook with a Flutter package or plugin; or document that this is not possible.

Use case: I am developing and maintaining a public package which would benefit from having an accompanying widgetbook.

Current problem:

flutter create --platforms=windows .
The "--platforms" argument is not supported in package template.

On Linux desktop, using current beta channel (2.7.0-3.1.pre) I have:

import 'package:flutter/material.dart';
import 'package:widgetbook/widgetbook.dart';

void main() {
  runApp(const HotReload());
}

class HotReload extends StatelessWidget {
  const HotReload({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Widgetbook(
      appInfo: AppInfo(
        name: 'My Widgetboard',
      ),
      lightTheme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      categories: [
        Category(
          name: 'Onboarding',
          widgets: [
            WidgetElement(
              name: 'Test 1',
              stories: [
                Story(
                  name: 'Default',
                  builder: (context) => const Center(
                    child: Text('Hello'),
                  ),
                ),
              ],
            ),
          ],
        ),
      ],
    );
  }
}

Changing the text from 'Hello' to 'World' and then doing a hot-reload doesn't actually update the preview in the Widgetbook window.

Widgets that depend on MediaQuery data such as MediaQuery.of(context).size will receive data from the Widgetbook window size instead of the device size as shown bellow.

• I see that one can create categories, but can they be nested? And how?
• What is a Folder and how is it different from a Category?
• Why is stories holding a list of use cases. Shouldn't the container then be called useCases or the item Story?

Currently the following rules are ignored:

• public_member_api_docs
• avoid_equals_and_hash_code_on_mutable_classes
• avoid_dynamic_calls
• lines_longer_than_80_chars

Since these are important rules, this will be addressed in the future.

I tried to add to test widgetbook with my last project and run into issue with adding dependency.

error:

Running "flutter pub get" in magillus_com...                    
Because every version of flutter_test from sdk depends on meta 1.3.0 and widgetbook >=0.0.10 depends on meta ^1.7.0, flutter_test from sdk is incompatible with widgetbook >=0.0.10.

So, because magillus_com depends on both widgetbook ^0.0.16 and flutter_test any from sdk, version solving failed.
pub get failed (1; So, because magillus_com depends on both widgetbook ^0.0.16 and flutter_test any from sdk, version solving failed.)

pubspec.yaml:

name: magillus_com
description: A website

publish_to: 'none' # Remove this line if you wish to publish to pub.dev

version: 1.0.0+1

environment:
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  widgetbook: ^0.0.16
  flutter_fimber: "^0.6.1"
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.1

dev_dependencies:
  flutter_test:
    sdk: flutter
...

**flutter doctor **:

Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.5.3, on Ubuntu 20.04.3 LTS 5.11.0-38-generic, locale en_US.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0-rc5)
[✓] Chrome - develop for the web
[✓] Linux toolchain - develop for Linux desktop
[✓] Android Studio (version 2020.3)
[✓] IntelliJ IDEA Ultimate Edition (version 2021.2)
[✓] VS Code (version 1.61.2)
[✓] Connected device (2 available)

• No issues found!

Same issue on all channels of Flutter.

If a project uses a different version than widgetbook, the user will get a dependency missmatch. This will make using the package difficult since the team using widgetbook is forced to update to the version used by the package.

Proposed solution:

Removal of flutter_bloc and bloc as a dependency by replacing the state management solution by e.g. InheritedWidget. InheritedWidget does not required additional dependencies.

If only one theme is defined, the Widgetbook app throws flutter exceptions when toggling the theme. The app continues running, but the exceptions are distracting - especially if you have debugging of packages enabled.

Packages

• widgetbook

the error occurred in combination with widgetbook_generator but there is no reason to believe this is actually caused by the widgetbook_generator package.

Suggested solution

• Disable the toggle Theme button if only one theme is defined
  It doesnt really make sense to default to the default theme of widgetbook.
• Add a tooltip explaining why the button is enabled
• Start the Widgetbook app in the theme that was defined (currently always defaults to dark theme)

Device can be moved out of sight. Expected behaviour is that the device is always visible. It can happen that the device move out of sight without being easily recoverable.

How to

1. Activate a Story
2. Move the Device around so its no longer visible

Workaround

• Move the Device back into sight or
• Deselect the active story and reselect it. This (currently) resets the viewport and brings the Device back into sight. See #6

Some users wished to create their Golden Tests with Widgetbook.

How to reproduce

1. Create a Story with a name (e.g. 'Test')
2. Start the Widgetbook
3. Observe that the Story is shown as 'Test'
4. Change the name (e.g. to 'Test2')
5. Hot reload the Widgetbook
6. Observe that the Story is shown as 'Test'. Expected: 'Test2'

This problem only occurs on web. E.g. on the Chrome browser.

Currently the list of widgets is random.

Some users wished to preview their widgets on multiple devices simultaneously. This could be achieved by showing multiple devices beside each other.

Some users wished to preview the code of the widgets in the UI of Widgetbook.

How to reproduce

1. Open a first Story
2. Move the 'Device' around
3. Open a second Story
4. Observe that the Device is reset to its default position.

Hi.

I'm trying to create a simple example with widgetbook (version 1.0.1) package, but it's impossible.

When I try to launch the app to chrome, throw this error:

EXCEPTION CAUGHT BY WIDGETS LIBRARY
The following assertion was thrown building HotReload:
Assertion failed: org-dartlang-sdk:///flutter_web_sdk/lib/_engine/engine/window.dart:25:10
!_isUrlStrategySet
"Cannot set URL strategy more than once."

The relevant error-causing widget was:
HotReload
HotReload:file:///Users/sissa/StudioProjects/flutter/infinite_hub/lib/stories/main.dart:16:19

I launch the app with flutter run -t lib/stories/main.dart -d chrome

My lib/stories/main.dart file:

void main() {
  runApp(HotReloadClass());
}

class HotReloadClass extends StatelessWidget {
  HotReloadClass({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: getAppTheme(),
      home: const HotReload(),
    );
  }
}

The widgetBook file:

import 'package:flutter/material.dart';
import 'package:infinite_hub/customviews/empty_result_widget.dart';
import 'package:widgetbook/widgetbook.dart';

class HotReload extends StatelessWidget {
  const HotReload({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Widgetbook(
      appInfo: AppInfo(name: 'Infinite HUB Widgets'),
      lightTheme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      categories: [
        WidgetbookCategory(name: 'widgets', widgets: [
          WidgetbookWidget(
            name: 'EmptyResultWidget',
            useCases: [
              WidgetbookUseCase(
                  name: 'Empty result',
                  builder: (context) => EmptyResultWidget(
                        title: 'Test widget book',
                        icon: Icons.clear,
                        baseColor: Colors.blueGrey,
                        onRefresh: () {},
                      ))
            ],
          )
        ]),
      ],
    );
  }
}

The custom widget:

import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';

class EmptyResultWidget extends StatelessWidget {
  final IconData icon;
  final String title;
  final Color baseColor;
  final Function onRefresh;

  EmptyResultWidget({this.title, this.icon, this.baseColor, this.onRefresh});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Icon(
            icon,
            color: baseColor,
            size: 100,
          ),
          SizedBox(
            height: 12.0,
          ),
          Text(
            title,
            style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 24.0,
              color: baseColor,
            ),
            textAlign: TextAlign.center,
          ),
          SizedBox(height: 20.0),
          null != onRefresh
              ? IconButton(
                  onPressed: onRefresh,
                  icon: Icon(
                    Icons.add,
                    color: Colors.blueGrey,
                  ),
                  iconSize: 30,
                )
              : SizedBox()
        ],
      ),
    );
  }
}

My Futter doctor report:

[✓] Flutter (Channel stable, 2.5.2, on macOS 11.5.2 20G95 darwin-x64, locale en-GB)
    • Flutter version 2.5.2 at /Users/sissa/fvm/versions/2.5.2
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 3595343e20 (6 weeks ago), 2021-09-30 12:58:18 -0700
    • Engine revision 6ac856380f
    • Dart version 2.14.3

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/sissa/Library/Android/sdk
    • Platform android-31, build-tools 30.0.2
    • ANDROID_HOME = /Users/sissa/Library/Android/sdk
    • Java binary at: /Applications/Android Studio 2.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 13.0, Build version 13A233
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 3.5)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)

[✓] Android Studio (version 4.2)
    • Android Studio at /Applications/Android Studio 2.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)

[✓] VS Code (version 1.40.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension can be installed from:
      🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 11.5.2 20G95 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 95.0.4638.69

• No issues found!

Thanks in advance.

When the app is starting the ControlBar is too large and widget elements are overflowing.

How to reproduce

Start the app. Do not change window size.

Problem

The ControlBar should be swrapped in a single child scroll view (excluding the button for discord).

Widgetbook currently ships with the meal_app example app. To reduce package size the example app should be either moved to another GitHub repo or should be moved out of the package's folder.

The navigator is not returning the correct path from the browser. Therefore, the selected story cannot be recovered.

Some users wished to preview their widgets not only on devices with portrait mode but also on landscape mode.

I have widgets that make use of Flutters standard localisation mechanism and so require having localizationsDelegates and supportedLocales set on their containing MaterialApp but there is currently no way to do so for the MaterialApp widget that widgetbook uses internally.

Some themes depend on BuildContext. The current properties require a ThemeData object but for Themes depending on BuildContext it would be beneficial if lightTheme and darkTheme properties would require a ThemeData Function(BuildContext context) type to build the theme.

Related packages:

• widgetbook
• widgetbook_generator

One user wished that Widgetbook should be a dev dependency and not a dependency.

One team wished to add detailed documentation to their widgets. They want to explain how the specific widgets are intended to be used.

One user wished for an option to resize the devices dynamically. The user wished for an option to not add different devices to preview the widgets on multiple screen sizes but to resize one device dynamically.

How to reproduce:

• Change Story
• press hot reload
• see the problem

I want to use the light theme as the startup theme. How to achieve that?

Feedback of one user: "My early feedback is to add some means of wrapping all use cases in other widgets. I have a kind of my own Theme, I'm not using the Material one, and right now I have to wrap every widget inside the usecase with that. Something like a Widget builder (Widget usecase) for a Widgetbook (or maybe even the categories/folders for scoping) would be really handy"

User wished for being able to change the font size according to the operating system's accessibility setting.