Semantics Addon

This addon is currently experimental, so any breaking changes can be introduced at any minor version.

The Semantics Addon is a powerful tool that allows you to visualize the semantics tree of your widget. This is particularly useful for debugging accessibility issues and ensuring that your app is accessible to all users.

The addon is based on a minimal variant of Flutter's SemanticsDebugger widget.

Usage

widgetbook/lib/widgetbook.config.dart
final config = Config)
  // ...
  addons: [
    SemanticsAddon(), 
  ],
);

Order

Since the order of addons matters, the SemanticsAddon should be used after all other addons, as they might be adding some semantics nodes to the tree.

Mode

To use this addon for testing, you can enable the SemanticsMode in your stories:

final $Default = _Story(
  scenarios: [
    _Scenario(
      name: 'Semantics',
      modes: [
        SemanticsMode(true), 
      ]
    ),
  ],
)