fix: added MediaQuery for WidgetbookDeviceFrame

widgetbook · Feb 8, 2022 · 0160ce4 · 0160ce4
1 parent 13b16f1
commit 0160ce4
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 8 deletions.
diff --git a/examples/widgetbook_example/widgetbook/widgetbook.dart b/examples/widgetbook_example/widgetbook/widgetbook.dart
@@ -22,6 +22,42 @@ class HotreloadWidgetbook extends StatelessWidget {
   const HotreloadWidgetbook({Key? key}) : super(key: key);
 
   Widget buildStorybook(BuildContext context) {
+    return Widgetbook(
+      themes: [WidgetbookTheme(name: "Light", data: ThemeData.light())],
+      categories: [
+        WidgetbookCategory(
+          name: 'widgets',
+          widgets: [
+            WidgetbookWidget(
+              name: 'some widget',
+              useCases: [
+                WidgetbookUseCase(
+                  name: 'Default',
+                  builder: (context) => Container(
+                    color: Colors.green,
+                    width: MediaQuery.of(context).size.width,
+                    height: MediaQuery.of(context).size.height,
+                    child: Padding(
+                      padding: EdgeInsets.only(
+                        left: MediaQuery.of(context).size.width * 0.25,
+                      ),
+                      child: Container(
+                        color: Colors.blue,
+                        width: 250,
+                        height: 250,
+                      ),
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ],
+        ),
+      ],
+      appInfo: AppInfo(
+        name: 'Widgetbook Example',
+      ),
+    );
     return Widgetbook.material(
       localizationsDelegates: [
         AppLocalizations.delegate,

diff --git a/packages/widgetbook/lib/src/devices/widgetbook_device_frame.dart b/packages/widgetbook/lib/src/devices/widgetbook_device_frame.dart
@@ -11,6 +11,26 @@ class WidgetbookDeviceFrame extends StatelessWidget {
   final Device device;
   final Widget child;
 
+  MediaQueryData mediaQuery({
+    required BuildContext context,
+  }) {
+    final mediaQuery = MediaQuery.of(context);
+    final viewPadding = mediaQuery.padding;
+
+    final width = device.resolution.logicalSize.width;
+    final height = device.resolution.logicalSize.height;
+
+    final deviceQuery = mediaQuery.copyWith(
+      size: Size(width, height),
+      padding: viewPadding,
+      viewInsets: EdgeInsets.zero,
+      viewPadding: viewPadding,
+      devicePixelRatio: device.resolution.scaleFactor,
+    );
+
+    return deviceQuery;
+  }
+
   @override
   Widget build(BuildContext context) {
     return Container(
@@ -23,7 +43,12 @@ class WidgetbookDeviceFrame extends StatelessWidget {
       ),
       width: device.resolution.logicalSize.width,
       height: device.resolution.logicalSize.height,
-      child: child,
+      child: MediaQuery(
+        data: mediaQuery(
+          context: context,
+        ),
+        child: child,
+      ),
     );
   }
 }
diff --git a/packages/widgetbook/lib/src/workbench/renderer.dart b/packages/widgetbook/lib/src/workbench/renderer.dart
@@ -63,14 +63,16 @@ class Renderer<CustomTheme> extends StatelessWidget {
                   context,
                   device,
                   frame,
-                  renderingState.scaffoldBuilder(
-                    context,
-                    frame,
-                    renderingState.useCaseBuilder(
+                  Builder(builder: (context) {
+                    return renderingState.scaffoldBuilder(
                       context,
-                      useCaseBuilder(context),
-                    ),
-                  ),
+                      frame,
+                      renderingState.useCaseBuilder(
+                        context,
+                        useCaseBuilder(context),
+                      ),
+                    );
+                  }),
                 );
               },
             ),