refactor: DeviceAddon

examples/widgetbook_example/widgetbook/widgetbook.dart

@@ -20,11 +20,22 @@ class HotreloadWidgetbook extends StatelessWidget {
   const HotreloadWidgetbook({Key? key}) : super(key: key);
 
   Widget buildStorybook(BuildContext context) {
+    final devices = [
+      Apple.iPhone11,
+      Apple.iPhone12,
+      Device.special(
+        name: 'Test',
+        resolution: Resolution(
+          nativeSize: DeviceSize(width: 400, height: 400),
+          scaleFactor: 1,
+        ),
+      ),
+    ];
+    final deviceFrameBuilder = DeviceFrameBuilder(
+      devices: devices,
+    );
     final activeFrameBuilder = WidgetbookFrameBuilder(
-      devices: [
-        Apple.iPhone11,
-        Apple.iPhone12,
-      ],
+      devices: devices,
     );
 
     return Widgetbook.material(
@@ -63,6 +74,7 @@ class HotreloadWidgetbook extends StatelessWidget {
             activeFrameBuilder: activeFrameBuilder,
             frameBuilders: [
               activeFrameBuilder,
+              deviceFrameBuilder,
             ],
           ),
         ),

packages/widgetbook/lib/src/addons/device_addon/frame_builders/device_frame_builder.dart

@@ -0,0 +1,49 @@
+import 'package:flutter/material.dart';
+import 'package:widgetbook/src/addons/device_addon/frame_builders/frame_builder.dart';
+import 'package:widgetbook/widgetbook.dart';
+
+DeviceInfo mapDeviceToDeviceInfo(Device device) {
+  final map = {
+    Apple.iPhone12Mini: Devices.ios.iPhone12Mini,
+    Apple.iPhone12: Devices.ios.iPhone12,
+    Apple.iPhone12ProMax: Devices.ios.iPhone12ProMax,
+    Apple.iPhone13Mini: Devices.ios.iPhone13Mini,
+    Apple.iPhone13: Devices.ios.iPhone13,
+    Apple.iPhone13ProMax: Devices.ios.iPhone13ProMax,
+    Apple.iPhoneSE2020: Devices.ios.iPhoneSE,
+    // not sure what to map this device to
+    // Apple.iPadAir9Inch: Devices.ios.iPadAir4,
+    Apple.iPad10Inch: Devices.ios.iPad,
+    Apple.iPadPro11Inch: Devices.ios.iPadPro11Inches,
+  };
+
+  final mappedDevice = map[device] ??
+      DeviceInfo.genericPhone(
+        platform: TargetPlatform.iOS,
+        id: 'custom',
+        name: 'custom',
+        screenSize: Size(
+          device.resolution.logicalSize.width,
+          device.resolution.logicalSize.height,
+        ),
+        pixelRatio: device.resolution.scaleFactor,
+      );
+
+  return mappedDevice;
+}
+
+class DeviceFrameBuilder extends FrameBuilder {
+  DeviceFrameBuilder({
+    required super.devices,
+  }) : super(
+          name: 'Device Frame',
+        );
+
+  @override
+  Widget builder(BuildContext context, Widget child) {
+    return DeviceFrame(
+      device: mapDeviceToDeviceInfo(context.device),
+      screen: child,
+    );
+  }
+}

packages/widgetbook/lib/src/addons/device_addon/frame_builders/frame_builders.dart

@@ -1 +1,2 @@
+export './device_frame_builder.dart';
 export './widgetbook_frame_builder.dart';

packages/widgetbook/lib/src/addons/device_addon/frame_builders/widgetbook_frame_builder.dart

@@ -4,19 +4,131 @@ import 'package:widgetbook/widgetbook.dart';
 
 class WidgetbookFrameBuilder extends FrameBuilder {
   WidgetbookFrameBuilder({
-    required List<Device> devices,
+    required super.devices,
   }) : super(
           name: 'Widgetbook',
-          devices: devices,
         );
 
+  static MediaQueryData mediaQuery({
+    required BuildContext context,
+    required Device? info,
+    required Orientation orientation,
+  }) {
+    final mediaQuery = MediaQuery.of(context);
+    const isRotated = false; // info?.isLandscape(orientation) ?? false;
+    final viewPadding = mediaQuery.padding;
+
+    final screenSize = info != null
+        ? Size(
+            info.resolution.logicalSize.width,
+            info.resolution.logicalSize.height,
+          )
+        : mediaQuery.size;
+    final width = isRotated ? screenSize.height : screenSize.width;
+    final height = isRotated ? screenSize.width : screenSize.height;
+
+    return mediaQuery.copyWith(
+      size: Size(width, height),
+      padding: viewPadding,
+      viewInsets: EdgeInsets.zero,
+      viewPadding: viewPadding,
+      devicePixelRatio:
+          info?.resolution.scaleFactor ?? mediaQuery.devicePixelRatio,
+    );
+  }
+
+  Widget _screen(BuildContext context, Widget screen, Device? info) {
+    final mediaQuery = MediaQuery.of(context);
+    const isRotated = false;
+    final screenSize = info != null
+        ? Size(
+            info.resolution.logicalSize.width,
+            info.resolution.logicalSize.height,
+          )
+        : mediaQuery.size;
+    final width = isRotated ? screenSize.height : screenSize.width;
+    final height = isRotated ? screenSize.width : screenSize.height;
+
+    return RotatedBox(
+      quarterTurns: isRotated ? 1 : 0,
+      child: SizedBox(
+        width: width,
+        height: height,
+        child: MediaQuery(
+          data: WidgetbookFrameBuilder.mediaQuery(
+            info: info,
+            orientation: Orientation.portrait,
+            context: context,
+          ),
+          child: screen,
+        ),
+      ),
+    );
+  }
+
   @override
   Widget builder(BuildContext context, Widget child) {
     final device = context.device;
-    return SizedBox(
-      width: device.resolution.logicalSize.width,
-      height: device.resolution.logicalSize.height,
-      child: child,
+    final frameSize = device.resolution.logicalSize;
+    final stack = SizedBox(
+      width: frameSize.width,
+      height: frameSize.height,
+      child: Stack(
+        children: [
+          Positioned(
+            key: const Key('Screen'),
+            left: 0,
+            top: 0,
+            width: frameSize.width,
+            height: frameSize.height,
+            child: ClipPath(
+              clipper: _ScreenClipper(
+                Path()
+                  ..addRect(
+                    Rect.fromLTWH(
+                      0,
+                      0,
+                      device.resolution.logicalSize.width,
+                      device.resolution.logicalSize.height,
+                    ),
+                  ),
+              ),
+              child: FittedBox(
+                child: _screen(context, child, device),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+
+    const isRotated = false; // device.isLandscape(orientation);
+
+    return FittedBox(
+      child: RotatedBox(
+        quarterTurns: isRotated ? -1 : 0,
+        child: stack,
+      ),
     );
   }
 }
+
+class _ScreenClipper extends CustomClipper<Path> {
+  const _ScreenClipper(this.path);
+
+  final Path? path;
+
+  @override
+  Path getClip(Size size) {
+    final path = this.path ?? (Path()..addRect(Offset.zero & size));
+    final bounds = path.getBounds();
+    final transform = Matrix4.translationValues(-bounds.left, -bounds.top, 0);
+
+    return path.transform(transform.storage);
+  }
+
+  @override
+  bool shouldReclip(_ScreenClipper oldClipper) {
+    return oldClipper.path != path;
+  }
+}

packages/widgetbook/lib/src/addons/widgets/addon_option_list.dart

@@ -4,13 +4,13 @@ import 'package:widgetbook/src/addons/widgets/addon_option_spacing.dart';
 
 class AddonOptionList<T> extends StatelessWidget {
   const AddonOptionList({
-    Key? key,
+    super.key,
     required this.name,
     required this.options,
     required this.selectedOptions,
     required this.onTap,
     required this.builder,
-  }) : super(key: key);
+  });
 
   final String name;
   final List<T> options;