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.
dartwidgetbook/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,
]),
],
);
}
}Information
You can use .all getter to add all available viewports to the addon:
dart
ViewportAddon(Viewports.all) // All platforms
ViewportAddon(IosViewports.all) // Specific platformSince the order of addons matters. The ViewportAddon should be used before all other addons.
The ViewportAddon is supported in the Multi Snapshot Reviews via the ViewportAddonConfig. Here's how to configure it:
Information
Unlike other AddonConfigs, the ViewportAddonConfig is defined in
widgetbook package, and not in widgetbook_annotation package.
dartwidgetbook/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,
]),
],
);
}
}