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

Each addon has a corresponding Mode to lock its value in scenarios. For this addon, use ViewportMode:

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