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.

Usage

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),
)

Order

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

Multi-snapshot Support

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