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/main.dart
class WidgetbookApp extends StatelessWidget {
const WidgetbookApp({super.key});
@override
Widget build(BuildContext context) {
return Widgetbook(
// ...
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.
Multi-snapshot Support
The SemanticsAddon is supported in the Multi Snapshot Reviews via the SemanticsAddonConfig. Here's how to configure it:
widgetbook/lib/main.dart
import 'package:widgetbook/widgetbook.dart';
import 'package:widgetbook_annotation/widgetbook_annotation.dart';
@App(
cloudAddonsConfigs: {
'Semantics Tree': [
SemanticsAddonConfig(true),
],
'No Semantics Tree': [
SemanticsAddonConfig(false),
],
},
)
class WidgetbookApp extends StatelessWidget {
const WidgetbookApp({super.key});
@override
Widget build(BuildContext context) {
return Widgetbook(
// ...
addons: [
SemanticsAddon(),
],
);
}
}