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.

• Adds NavigationTree
• NavigationTree & NavigationTreeNode added to widgetbook_for_widgetbook
• Major changes on NavigationTreeItem
• 🧪 Added and updated tests

List of issues which are fixed by the PR

#44

I'm still working on the test, but wanted feedback in case something should be changed. I structured it anticipating how we're going to add the alphabetical sort, so I added a row that will function as a buttons bar.

Checklist

In progress:

• [ ] I added new tests to check the change I am making].

Shows ellipses when a tile's name is too long, adds a tool tip to tiles that shows the full name.

List of issues which are fixed by the PR

#63

Screenshots

If applicable, add screenshots to help explain the changes.

Checklist

• [x] I signed the [CLA].
• [x] I listed at least one issue that this PR fixes in the description above.
• [x] I updated/added relevant documentation (doc comments with ///).
• [x] I added new tests to check the change I am making].
• [x] All existing and new tests are passing.

This pull request updates WidgetBook to use device_frame instead of the built in widgetbook_models.

The main benefits of using device_frame are:

• A List of Ready to use Device Frame UI
• Correct MediaQuery data for all devices. (fixes #66)
• User toggable frame
• Built in Virtual Keyboard
• Orientation Switching (fixes #56 )

This changes renders widgetbook_models package completely useless. The only braking change for users is switching from device.dart to devices.dart from the device_frame library.

devices.dart will be exposed from widgetbook so users do not need to add this dependency separately. The only downside is that device_frame does not include watch devices which are included in widgetbook, But I could make a pull request to device_frame later on to add more devices into it.

TODO:

• [ ] Update Documentation
• [ ] Clean Up Code
• [ ] Update Tests

Preview

Uses new NavigationTree in widgetbook

Current System:

(all within the widgetbook package)

• Organizer
  • Takes name
  • Implements path
  • Has non-final Organizer? parent param.
  • Subclasses:
    • WidgetbookUseCase
      • Takes Widget Function(BuildContext) builder that returns the use case widget
    • ExpandableOrganizer, subclasses:
      • WidgetbookCategory
        • Takes List<WidgetbookFolder> folders & List<WidgetbookComponent> widgets
      • WidgetbookFolder
        • Takes List<WidgetbookFolder> folders & List<WidgetbookComponent> widgets
      • WidgetbookComponent
        • Takes List<WidgetbookUseCase> useCases only

Limitations:

• Only a WidgetbookCategory is accepted as the root tree element
• Having two nested lists (folders & widgets)
• Old UI

New System

The main objectives are:

1. Implement the new NavigationTree UI with search functionality
2. Eliminate the limitation of only taking WidgetbookCategory as the root tree element
3. Eliminate the need to provide 2 child lists (folders & widgets) and handle sorting folders (or any expandable organizer) at the top internally
4. Internally, there should be 2 types of classes, one that can expand (has children), and one that is selectable and doesn't take children (leaf) such that, the developer, when manually creating the tree, should be able to start with any of the Multi child/Expandable node subclasses
5. The structure that the developer creates when they create the tree should be internally mapped to the structure that the NavigationTree widget takes which is a List<NavigationTreeNodeData> (from the widgetbook_core package), this was done through subclasses in this PR.

Classes:

• NavigationTreeNodeData (widgetbook_core package)
  • Takes name
  • Implements path
  • Has non-final NavigationTreeNodeData? parent param.
  • Extends Equatable
    • Note: although all tests currently pass, value equality might not work perfectly due to the mutable nature of this class caused by the parent param. If any improvement were to be applied later it might be useful to find a way to create the tree structure with immutable classes to make it more testable.
  • Subclasses
    • LeafNavigationNodeData - A node that doesn't take children
      • Subclasses - (widgetbook package)
        • WidgetbookUseCase (original class)
    • MultiChildNavigationNodeData - A node that takes children
      • Subclasses - (widgetbook package) (what the navigation tree can take a list of)
        • NEW WidgetbookPackage takes List<MultiChildNavigationNodeData> children
        • WidgetbookFolder takes List<MultiChildNavigationNodeData> children
        • WidgetbookCategory takes List<MultiChildNavigationNodeData> children
        • WidgetbookComponent takes List<WidgetbookUseCase> useCases

Example tree of List<NavigationTreeNodeData>

final tree = [
    NavigationTreeNodeData(
      name: 'Package',
      type: NavigationNodeType.package,
      children: [
        NavigationTreeNodeData(
          name: 'Category',
          type: NavigationNodeType.category,
          children: [
            NavigationTreeNodeData(
              name: 'Component',
              type: NavigationNodeType.component,
              children: [
                NavigationTreeNodeData(
                  id: 'use_case_1_id',
                  name: 'Use Case 1',
                  type: NavigationNodeType.useCase,
                ),
                NavigationTreeNodeData(
                  id: 'use_case_2_id',
                  name: 'Use Case 2',
                  type: NavigationNodeType.useCase,
                ),
              ],
            ),
          ],
        ),
      ],
    ),
    NavigationTreeNodeData(
        name: 'Component',
        type: NavigationNodeType.component,
        children: [
          NavigationTreeNodeData(
            id: 'use_case_3_id',
            name: 'Use Case 3',
            type: NavigationNodeType.useCase,
          ),
        ],
    ),
];

Corresponding List<MultiChildNavigationNodeData>

This is the tree provided by the developer to the Widgetbook app

final tree = [
  WidgetbookPackage(
    name: 'Package',
    children: [
      WidgetbookCategory(
        name: 'Category',
        children: [
          WidgetbookComponent(
            name: 'Component',
            useCases: [
              WidgetbookUseCase(
                name: 'Use Case 1',
                builder: (context) {},
              ),
              WidgetbookUseCase(
                name: 'Use Case 2',
                builder: (context) {},
              ),
            ],
          ),
        ],
      ),
    ],
  ),
  WidgetbookComponent(
    name: 'Component',
    useCases: [
      WidgetbookUseCase(
        name: 'Use Case 3',
        builder: (context) {},
      ),
    ],
  ),
];

For later PRs:

• Expand All/Collapse All on the NavigationTreeItem level.
  • This will require some major change on the way expanding items is currently implemented.
• Extract search into FilterService to reuse in cloud

List of issues which are fixed by the PR

#21

Checklist

• [x] I signed the [CLA].
• [x] I listed at least one issue that this PR fixes in the description above.
• [x] I updated/added relevant documentation (doc comments with ///).
• [x] I added new tests to check the change I am making].
• [x] All existing and new tests are passing.

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.

https://user-images.githubusercontent.com/16095735/143028314-568064aa-6c85-499c-91c8-1a3329d9333e.mov

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.

ColorKnob

• Added Color Knob
• Added Test

List of issues which are fixed by the PR

You must list at least one issue.

Screenshots

If applicable, add screenshots to help explain the changes.

Checklist

• [ ] I signed the CLA.
• [ ] I listed at least one issue that this PR fixes in the description above.
• [ ] I updated/added relevant documentation (doc comments with ///).
• [ ] I added new tests to check the change I am making].
• [ ] All existing and new tests are passing.

If you need help, consider asking for advice on Discord.

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

PR description: fixes #383 There is support of media query data from renderingState.deviceFrameBuilder but it is getting override by renderingState.appBuilder as renderingState.appBuilder uses MaterialApp.router which has it's own MediaQuery data of web window.

List of issues which are fixed by the PR

issue: #383

Screenshots

If applicable, add screenshots to help explain the changes.

Checklist

• [x] I signed the CLA.
• [x] I listed at least one issue that this PR fixes in the description above.
• [x] I updated/added relevant documentation (doc comments with ///).
• [x] I added new tests to check the change I am making].
• [x] All existing and new tests are passing.

If you need help, consider asking for advice on Discord.

Description NavigationTreeItem widgets have pixel overflow error when their level is larger than 11.

Steps To Reproduce

1. Go to the Widgetbook Package project in Widgetbook Cloud
2. Open a feat/navigation-tree build (or any recent build, for example)
3. Open the NavigationTreeItem component, Default use case
4. Adjust the Level slider knob to a value larger than 11
5. See that pixel overflow error happens.

Expected Behavior

• The Row should somehow allow its content to overflow.
• Additionally, a solution for UX to show users the content of the hidden item is to show a tooltip with the item's path on hover. (Similar to VSCode)

Screenshots The text can overflow without a problem:

However, the icon and expander icons cause pixel overflow error when overflowed

Description i'm working on a widgetbook project , i'm displaying my project widgets using themes and screenUtils When adding the screenUtils to display widgets with theme , widgets are not getting the right size , scaling is not working as showen in the captures

code exemple :

Widget buildStorybook(BuildContext context) {

    return ScreenUtilInit(
       designSize: const Size(360, 760),
        useInheritedMediaQuery: true,
        minTextAdapt: true,
        builder: (context, child) {
          return Widgetbook.material(
            deviceFrameBuilder: (context, device, frame, orientation, child) {
              if (_currentDevice != device) {
                _currentDevice = device;
              }
              return defaultDeviceFrameBuilder(
                context,
                device,
                frame,
                orientation,
                child,
              );
            },
            devices: _devices,
            textScaleFactors: [1],
            themes: [
//themes of the app using screenUtils dimensions (.h,.w...)
              WidgetbookTheme(
                name: 'Light',
                data: LightTheme.themeData
              ),
              WidgetbookTheme(
                  name: 'dark',
                  data:DarkTheme.themeData
              ),
            ],
            categories: [
              buttonWidgetBook,
             
            ],
            appInfo: AppInfo(name: 'WidgetBook App'),
            appBuilder: (context, child) {
              return child;
            });
        });
  }

Expected Behavior

Result

Description I tried to use widgetbook and created a small sample for myself. However, when using an options knob on a button with "button style", I need to switch panes to reflect the change in the button.

The second problem is hotreloading (in desktop environment), which does not update anything when I tell android studio to hot reload. Only a full hot restart does reflect the latest changes (even with a UniqueKey() in the whole widgetbook app).

Steps To Reproduce

1. Start widgetbook

2. Change some title in the code

3. use hotreload -> nothing happens

4. Use widgetbook

5. Use an options knob

6. Change it in the widget you are displaying -> widget is not rerendered

Expected Behavior Both features should work like expected.

Screenshots

Additional Context

  @override
  Widget build(BuildContext context) {
    return Widgetbook.material(
      key: UniqueKey(),
      localizationsDelegates: [
        S.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: S.delegate.supportedLocales,
      devices: [
        Samsung.s10,
        Apple.iPhone12ProMax,
        Apple.iPhone13Mini,
        Apple.iPhone11ProMax,
        Apple.iPhone11,
        Desktop.desktop1080p,
        Desktop.desktop1440p,
      ],
      themes: [
        WidgetbookTheme(
          name: 'Default',
          data: ThemeData(
              colorScheme: const ColorScheme.light(primary: AppColors.signal500, secondary: AppColors.text500)),
        )
      ],
      categories: [
        WidgetbookCategory(name: 'Brand', widgets: [
          WidgetbookComponent(name: 'Default', isExpanded: true, useCases: [
            ...colorUseCases,
            ...iconographyUseCases,
            ...typographyUseCases,
          ])
        ]),
        WidgetbookCategory(name: 'Components', isExpanded: true, widgets: [
          buttonsComponent,
        ]),
      ],
      appInfo: AppInfo(name: 'Widgetbook'),
    );
  }

WidgetbookComponent buttonsComponent = WidgetbookComponent(name: 'Button', useCases: [
  WidgetbookUseCase(
    name: 'Default',
    builder: (context) => Center(
        child: Button(
            text: context.knobs.text(label: 'Text', description: 'Button label', initialValue: 'Click Me'),
            style: context.knobs.options(label: 'Style', options: [
              const Option(label: 'Primary', value: ButtonStyle.primary),
              const Option(label: 'Secondary', value: ButtonStyle.secondary),
            ]),
            onPressed: () {})),
  ),
  WidgetbookUseCase(
    name: 'Icon Button',
    builder: (context) => Center(
        child: IconButton(
            key: UniqueKey(), onPressed: () {}, icon: const Icon(AppIcons.back, color: AppColors.signal500))),
  ),
]);