Viewport Addon
This addon is currently experimental, so any breaking changes can be introduced at any minor version. It will replace the Device Frame Addon in the near future.
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,
]),
],
);
}
}