Builder Addon
The BuilderAddon is utility that can help you:
- Wrap all use-cases with a custom widget.
- Create a custom addon with less boilerplate, but the addon will have no "controls" shown in the addons panel.
Usage
widgetbook/lib/main.dart
class WidgetbookApp extends StatelessWidget {
const WidgetbookApp({super.key});
@override
Widget build(BuildContext context) {
return Widgetbook(
directories: directories,
addons: [
BuilderAddon(
name: 'Red',
builder: (context, child) => ColoredBox(
color: Colors.red,
child: child,
),
),
],
);
}
}
flutter_screenutil
If you are using flutter_screenutil package, you can use the BuilderAddon to wrap your use-cases with ScreenUtilInit widget.
flutter_screenutil >= 5.9.2
doesn't work with Widgetbook as they started using View.of instead of
MediaQuery.of in
f7c551a
widgetbook/pubspec.yaml
dependencies:
flutter_screenutil: 5.9.1
widgetbook: ^3.13.0
widgetbook/lib/main.dart
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:widgetbook/widgetbook.dart';
class WidgetbookApp extends StatelessWidget {
const WidgetbookApp({super.key});
@override
Widget build(BuildContext context) {
return Widgetbook(
directories: directories,
addons: [
BuilderAddon(
name: 'ScreenUtil',
builder: (context, child) {
return ScreenUtilInit(
designSize: const Size(375, 812),
minTextAdapt: true,
splitScreenMode: true,
// This is needed to use the workbench [MediaQuery]
useInheritedMediaQuery: true,
builder: (context, child) => child!,
child: child,
);
},
)
],
);
}
}
accessibility_tools
An alternative to the deprecated AccessibilityAddon is to use the
accessibility_tools package with the BuilderAddon as follows:
widgetbook/pubspec.yaml
dependencies:
accessibility_tools: ^2.0.0
widgetbook: ^3.13.0
widgetbook/lib/main.dart
import 'package:accessibility_tools/accessibility_tools.dart';
import 'package:widgetbook/widgetbook.dart';
class WidgetbookApp extends StatelessWidget {
const WidgetbookApp({super.key});
@override
Widget build(BuildContext context) {
return Widgetbook(
directories: directories,
addons: [
BuilderAddon(
name: 'Accessibility',
builder: (context, child) => AccessibilityTools(
child: child,
),
),
],
);
}
}