Device Frame Addon

The DeviceFrameAddon is a powerful tool that allows you to preview your use-cases in a variety of device frames. This is particularly useful for ensuring that your components look great on different screen sizes and orientations. The addon provides a set of predefined devices.

class WidgetbookApp extends StatelessWidget {
  const WidgetbookApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Widgetbook(
      // ...
      addons: [
        DeviceFrameAddon( 
          devices: [ 
            Devices.ios.iPhoneSE, 
            Devices.ios.iPhone13, 
          ], 
        ), 
      ],
    );
  }
}

DeviceInfo.genericPhone(
  id: 'android-device',
  name: 'Android Device',
  platform: TargetPlatform.android,
  screenSize: const Size(412, 732),
)

Since the order of addons matters. The DeviceFrameAddon should be used before all other addons.

The DeviceFrameAddon is not supported in the Multi Snapshot Reviews yet. However, you can use the ViewportAddon to achieve a similar effect.