Viewport Addon

The Viewport Addon is an invaluable tool that lets you preview your stories on various viewports. These viewports simulate a realistic environment by:

1. Setting width and height boundaries to your story.
2. Overriding MediaQuery's devicePixelRatio to ensure your component behaves as as expected on different devices.
3. Overriding ThemeData.platform to simulate different platforms.

Usage

final config = Config(
  // ...
  addons: [
    ViewportAddon([ 
      Viewports.none, 
      IosViewports.iPhone13, 
      AndroidViewports.samsungGalaxyNote20, 
      MacosViewports.macbookPro, 
      WindowsViewports.desktop, 
      LinuxViewports.desktop, 
    ]), 
  ],
);

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.

Mode

To use this addon for testing, you can enable the ViewportMode in your stories:

final $Default = _Story(
  scenarios: [
    _Scenario(
      name: 'iPhone 13',
      modes: [
        ViewportMode(IosViewports.iPhone13), 
      ]
    ),
  ],
)
          IosViewports.iPhone13, 
          IosViewports.iPhone12, 
        ]), 
      ],
    );
  }
}