Viewport Addon
The Viewport Addon is an invaluable tool that lets you preview your use-cases on various viewports. These viewports simulate a realistic environment by:
- Setting width and height boundaries to your use-case.
- Overriding
MediaQuery'sdevicePixelRatioto ensure your component behaves as as expected on different devices. - Overriding
ThemeData.platformto simulate different platforms.
Usage
widgetbook/lib/main.dart
class WidgetbookApp extends StatelessWidget {
const WidgetbookApp({super.key});
@override
Widget build(BuildContext context) {
return Widgetbook(
// ...
addons: [
ViewportAddon([
Viewports.none,
IosViewports.iPhone13,
AndroidViewports.samsungGalaxyNote20,
MacosViewports.macbookPro,
WindowsViewports.desktop,
LinuxViewports.desktop,
]),
],
);
}
}
You can use .all getter to add all available viewports to the addon:
ViewportAddon(Viewports.all) // All platforms
ViewportAddon(IosViewports.all) // Specific platform
Order
Since the order of addons matters. The ViewportAddon should be used before all other addons.
Multi-snapshot Support
The ViewportAddon is supported in the Multi Snapshot Reviews via the ViewportAddonConfig. Here's how to configure it:
Unlike other AddonConfigs, the ViewportAddonConfig is defined in
widgetbook package, and not in widgetbook_annotation package.
widgetbook/lib/main.dart
import 'package:widgetbook/widgetbook.dart';
import 'package:widgetbook_annotation/widgetbook_annotation.dart';
@App(
cloudAddonsConfigs: {
'iPhone 13': [
ViewportAddonConfig(IosViewports.iPhone13),
],
'iPhone 12': [
ViewportAddonConfig(IosViewports.iPhone12),
],
},
)
class WidgetbookApp extends StatelessWidget {
const WidgetbookApp({super.key});
@override
Widget build(BuildContext context) {
return Widgetbook(
// ...
addons: [
ViewportAddon([
IosViewports.iPhone13,
IosViewports.iPhone12,
]),
],
);
}
}