feat(widgetbook): added feature to toggle the orientation of a device

widgetbook · Feb 10, 2022 · ae42e4c · ae42e4c
1 parent eb6493c
commit ae42e4c
Show file tree

Hide file tree

Showing 11 changed files with 155 additions and 11 deletions.
diff --git a/packages/widgetbook/lib/src/devices/widgetbook_device_frame.dart b/packages/widgetbook/lib/src/devices/widgetbook_device_frame.dart
@@ -6,22 +6,38 @@ class WidgetbookDeviceFrame extends StatelessWidget {
     Key? key,
     required this.device,
     required this.child,
+    required this.orientation,
   }) : super(key: key);
 
   final Device device;
   final Widget child;
+  final Orientation orientation;
+
+  bool get _isLandscape {
+    return orientation == Orientation.landscape &&
+        device.type != DeviceType.desktop;
+  }
+
+  double get _width {
+    return _isLandscape
+        ? device.resolution.logicalSize.height
+        : device.resolution.logicalSize.width;
+  }
+
+  double get _height {
+    return _isLandscape
+        ? device.resolution.logicalSize.width
+        : device.resolution.logicalSize.height;
+  }
 
   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),
+      size: Size(_width, _height),
       padding: viewPadding,
       viewInsets: EdgeInsets.zero,
       viewPadding: viewPadding,
@@ -41,8 +57,8 @@ class WidgetbookDeviceFrame extends StatelessWidget {
               : Colors.black,
         ),
       ),
-      width: device.resolution.logicalSize.width,
-      height: device.resolution.logicalSize.height,
+      width: _width,
+      height: _height,
       child: MediaQuery(
         data: mediaQuery(
           context: context,

diff --git a/packages/widgetbook/lib/src/rendering/builders/device_builder.dart b/packages/widgetbook/lib/src/rendering/builders/device_builder.dart
@@ -36,10 +36,12 @@ DeviceFrameBuilderFunction get defaultDeviceFrameBuilder => (
       BuildContext context,
       Device device,
       WidgetbookFrame frame,
+      Orientation orientation,
       Widget child,
     ) {
       if (frame == WidgetbookFrame.defaultFrame()) {
         return WidgetbookDeviceFrame(
+          orientation: orientation,
           device: device,
           child: child,
         );
@@ -48,6 +50,7 @@ DeviceFrameBuilderFunction get defaultDeviceFrameBuilder => (
       if (frame == WidgetbookFrame.deviceFrame()) {
         final deviceInfo = mapDeviceToDeviceInfo(device);
         return DeviceFrame(
+          orientation: orientation,
           device: deviceInfo,
           screen: child,
         );
@@ -60,5 +63,6 @@ typedef DeviceFrameBuilderFunction = Widget Function(
   BuildContext context,
   Device device,
   WidgetbookFrame frame,
+  Orientation orientation,
   Widget child,
 );
diff --git a/packages/widgetbook/lib/src/workbench/comparison_renderer.dart b/packages/widgetbook/lib/src/workbench/comparison_renderer.dart
@@ -26,6 +26,7 @@ class ComparisonRenderer<CustomTheme> extends StatelessWidget {
               theme: e.data,
               frame: workbenchState.frame,
               textScaleFactor: workbenchState.textScaleFactor!,
+              orientation: workbenchState.orientation,
               useCaseBuilder: builder,
             ),
           )
@@ -48,6 +49,7 @@ class ComparisonRenderer<CustomTheme> extends StatelessWidget {
               theme: workbenchState.theme!.data,
               frame: workbenchState.frame,
               textScaleFactor: workbenchState.textScaleFactor!,
+              orientation: workbenchState.orientation,
               useCaseBuilder: builder,
             ),
           )
@@ -70,6 +72,7 @@ class ComparisonRenderer<CustomTheme> extends StatelessWidget {
               theme: workbenchState.theme!.data,
               frame: workbenchState.frame,
               textScaleFactor: workbenchState.textScaleFactor!,
+              orientation: workbenchState.orientation,
               useCaseBuilder: builder,
             ),
           )
@@ -92,6 +95,7 @@ class ComparisonRenderer<CustomTheme> extends StatelessWidget {
               theme: workbenchState.theme!.data,
               frame: workbenchState.frame,
               textScaleFactor: e,
+              orientation: workbenchState.orientation,
               useCaseBuilder: builder,
             ),
           )
@@ -111,6 +115,7 @@ class ComparisonRenderer<CustomTheme> extends StatelessWidget {
       theme: workbenchState.theme!.data,
       frame: workbenchState.frame,
       textScaleFactor: workbenchState.textScaleFactor!,
+      orientation: workbenchState.orientation,
       useCaseBuilder: builder,
     );
   }

diff --git a/packages/widgetbook/lib/src/workbench/orientation_handle.dart b/packages/widgetbook/lib/src/workbench/orientation_handle.dart
@@ -0,0 +1,20 @@
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import 'package:widgetbook/src/workbench/selection_item.dart';
+import 'package:widgetbook/src/workbench/workbench_provider.dart';
+
+class OrientationHandle<CustomTheme> extends StatelessWidget {
+  const OrientationHandle({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final workbenchProvider = context.watch<WorkbenchProvider<CustomTheme>>();
+    final workbenchState = workbenchProvider.state;
+    return SelectionItem(
+      name: 'Portrait',
+      selectedItem: workbenchState.orientation,
+      item: Orientation.portrait,
+      onPressed: workbenchProvider.toggledOrientation,
+    );
+  }
+}
diff --git a/packages/widgetbook/lib/src/workbench/renderer.dart b/packages/widgetbook/lib/src/workbench/renderer.dart
@@ -13,6 +13,7 @@ class Renderer<CustomTheme> extends StatelessWidget {
     required this.theme,
     required this.frame,
     required this.textScaleFactor,
+    required this.orientation,
     required this.useCaseBuilder,
   }) : super(key: key);
 
@@ -22,6 +23,7 @@ class Renderer<CustomTheme> extends StatelessWidget {
   final CustomTheme theme;
   final WidgetbookFrame frame;
   final double textScaleFactor;
+  final Orientation orientation;
   final Widget Function(BuildContext) useCaseBuilder;
 
   Widget _buildText() {
@@ -65,6 +67,7 @@ class Renderer<CustomTheme> extends StatelessWidget {
                   context,
                   device,
                   frame,
+                  orientation,
                   Builder(builder: (context) {
                     return renderingState.textScaleBuilder(
                       context,

diff --git a/packages/widgetbook/lib/src/workbench/workbench_controls.dart b/packages/widgetbook/lib/src/workbench/workbench_controls.dart
@@ -5,6 +5,7 @@ import 'package:widgetbook/src/localization/localization_handle.dart';
 import 'package:widgetbook/src/rendering/render_handle.dart';
 import 'package:widgetbook/src/text_scale/text_scale_handle.dart';
 import 'package:widgetbook/src/theming/theme_handle.dart';
+import 'package:widgetbook/src/workbench/orientation_handle.dart';
 
 class WorkbenchControls<CustomTheme> extends StatelessWidget {
   const WorkbenchControls({Key? key}) : super(key: key);
@@ -41,6 +42,10 @@ class WorkbenchControls<CustomTheme> extends StatelessWidget {
                     width: 40,
                   ),
                   TextScaleHandle<CustomTheme>(),
+                  const SizedBox(
+                    width: 40,
+                  ),
+                  OrientationHandle<CustomTheme>(),
                 ],
               ),
             ),

diff --git a/packages/widgetbook/lib/src/workbench/workbench_provider.dart b/packages/widgetbook/lib/src/workbench/workbench_provider.dart
@@ -146,6 +146,13 @@ class WorkbenchProvider<CustomTheme>
     state = state.copyWith(textScaleFactor: textScaleFactor);
   }
 
+  void toggledOrientation() {
+    final orientation = state.orientation == Orientation.portrait
+        ? Orientation.landscape
+        : Orientation.portrait;
+    state = state.copyWith(orientation: orientation);
+  }
+
   void nextLocale() {
     final nextLocale = state.locales.getNext(state.locale);
     state = state.copyWith(

diff --git a/packages/widgetbook/lib/src/workbench/workbench_state.dart b/packages/widgetbook/lib/src/workbench/workbench_state.dart
@@ -14,6 +14,7 @@ class WorkbenchState<CustomTheme> with _$WorkbenchState<CustomTheme> {
     Device? device,
     required double? textScaleFactor,
     required WidgetbookFrame frame,
+    @Default(Orientation.portrait) Orientation orientation,
     required List<WidgetbookTheme<CustomTheme>> themes,
     required List<Locale> locales,
     required List<Device> devices,

diff --git a/packages/widgetbook/lib/src/workbench/workbench_state.freezed.dart b/packages/widgetbook/lib/src/workbench/workbench_state.freezed.dart
@@ -24,6 +24,7 @@ class _$WorkbenchStateTearOff {
       Device? device,
       required double? textScaleFactor,
       required WidgetbookFrame frame,
+      Orientation orientation = Orientation.portrait,
       required List<WidgetbookTheme<CustomTheme>> themes,
       required List<Locale> locales,
       required List<Device> devices,
@@ -36,6 +37,7 @@ class _$WorkbenchStateTearOff {
       device: device,
       textScaleFactor: textScaleFactor,
       frame: frame,
+      orientation: orientation,
       themes: themes,
       locales: locales,
       devices: devices,
@@ -56,6 +58,7 @@ mixin _$WorkbenchState<CustomTheme> {
   Device? get device => throw _privateConstructorUsedError;
   double? get textScaleFactor => throw _privateConstructorUsedError;
   WidgetbookFrame get frame => throw _privateConstructorUsedError;
+  Orientation get orientation => throw _privateConstructorUsedError;
   List<WidgetbookTheme<CustomTheme>> get themes =>
       throw _privateConstructorUsedError;
   List<Locale> get locales => throw _privateConstructorUsedError;
@@ -80,6 +83,7 @@ abstract class $WorkbenchStateCopyWith<CustomTheme, $Res> {
       Device? device,
       double? textScaleFactor,
       WidgetbookFrame frame,
+      Orientation orientation,
       List<WidgetbookTheme<CustomTheme>> themes,
       List<Locale> locales,
       List<Device> devices,
@@ -108,6 +112,7 @@ class _$WorkbenchStateCopyWithImpl<CustomTheme, $Res>
     Object? device = freezed,
     Object? textScaleFactor = freezed,
     Object? frame = freezed,
+    Object? orientation = freezed,
     Object? themes = freezed,
     Object? locales = freezed,
     Object? devices = freezed,
@@ -139,6 +144,10 @@ class _$WorkbenchStateCopyWithImpl<CustomTheme, $Res>
           ? _value.frame
           : frame // ignore: cast_nullable_to_non_nullable
               as WidgetbookFrame,
+      orientation: orientation == freezed
+          ? _value.orientation
+          : orientation // ignore: cast_nullable_to_non_nullable
+              as Orientation,
       themes: themes == freezed
           ? _value.themes
           : themes // ignore: cast_nullable_to_non_nullable
@@ -206,6 +215,7 @@ abstract class _$WorkbenchStateCopyWith<CustomTheme, $Res>
       Device? device,
       double? textScaleFactor,
       WidgetbookFrame frame,
+      Orientation orientation,
       List<WidgetbookTheme<CustomTheme>> themes,
       List<Locale> locales,
       List<Device> devices,
@@ -240,6 +250,7 @@ class __$WorkbenchStateCopyWithImpl<CustomTheme, $Res>
     Object? device = freezed,
     Object? textScaleFactor = freezed,
     Object? frame = freezed,
+    Object? orientation = freezed,
     Object? themes = freezed,
     Object? locales = freezed,
     Object? devices = freezed,
@@ -271,6 +282,10 @@ class __$WorkbenchStateCopyWithImpl<CustomTheme, $Res>
           ? _value.frame
           : frame // ignore: cast_nullable_to_non_nullable
               as WidgetbookFrame,
+      orientation: orientation == freezed
+          ? _value.orientation
+          : orientation // ignore: cast_nullable_to_non_nullable
+              as Orientation,
       themes: themes == freezed
           ? _value.themes
           : themes // ignore: cast_nullable_to_non_nullable
@@ -305,6 +320,7 @@ class _$_WorkbenchState<CustomTheme> implements _WorkbenchState<CustomTheme> {
       this.device,
       required this.textScaleFactor,
       required this.frame,
+      this.orientation = Orientation.portrait,
       required this.themes,
       required this.locales,
       required this.devices,
@@ -324,6 +340,9 @@ class _$_WorkbenchState<CustomTheme> implements _WorkbenchState<CustomTheme> {
   final double? textScaleFactor;
   @override
   final WidgetbookFrame frame;
+  @JsonKey()
+  @override
+  final Orientation orientation;
   @override
   final List<WidgetbookTheme<CustomTheme>> themes;
   @override
@@ -337,7 +356,7 @@ class _$_WorkbenchState<CustomTheme> implements _WorkbenchState<CustomTheme> {
 
   @override
   String toString() {
-    return 'WorkbenchState<$CustomTheme>(comparisonSetting: $comparisonSetting, theme: $theme, locale: $locale, device: $device, textScaleFactor: $textScaleFactor, frame: $frame, themes: $themes, locales: $locales, devices: $devices, frames: $frames, textScaleFactors: $textScaleFactors)';
+    return 'WorkbenchState<$CustomTheme>(comparisonSetting: $comparisonSetting, theme: $theme, locale: $locale, device: $device, textScaleFactor: $textScaleFactor, frame: $frame, orientation: $orientation, themes: $themes, locales: $locales, devices: $devices, frames: $frames, textScaleFactors: $textScaleFactors)';
   }
 
   @override
@@ -353,6 +372,8 @@ class _$_WorkbenchState<CustomTheme> implements _WorkbenchState<CustomTheme> {
             const DeepCollectionEquality()
                 .equals(other.textScaleFactor, textScaleFactor) &&
             const DeepCollectionEquality().equals(other.frame, frame) &&
+            const DeepCollectionEquality()
+                .equals(other.orientation, orientation) &&
             const DeepCollectionEquality().equals(other.themes, themes) &&
             const DeepCollectionEquality().equals(other.locales, locales) &&
             const DeepCollectionEquality().equals(other.devices, devices) &&
@@ -370,6 +391,7 @@ class _$_WorkbenchState<CustomTheme> implements _WorkbenchState<CustomTheme> {
       const DeepCollectionEquality().hash(device),
       const DeepCollectionEquality().hash(textScaleFactor),
       const DeepCollectionEquality().hash(frame),
+      const DeepCollectionEquality().hash(orientation),
       const DeepCollectionEquality().hash(themes),
       const DeepCollectionEquality().hash(locales),
       const DeepCollectionEquality().hash(devices),
@@ -392,6 +414,7 @@ abstract class _WorkbenchState<CustomTheme>
       Device? device,
       required double? textScaleFactor,
       required WidgetbookFrame frame,
+      Orientation orientation,
       required List<WidgetbookTheme<CustomTheme>> themes,
       required List<Locale> locales,
       required List<Device> devices,
@@ -411,6 +434,8 @@ abstract class _WorkbenchState<CustomTheme>
   @override
   WidgetbookFrame get frame;
   @override
+  Orientation get orientation;
+  @override
   List<WidgetbookTheme<CustomTheme>> get themes;
   @override
   List<Locale> get locales;

diff --git a/packages/widgetbook/pubspec.lock b/packages/widgetbook/pubspec.lock
@@ -551,10 +551,10 @@ packages:
   widgetbook_models:
     dependency: "direct main"
     description:
-      path: "../widgetbook_models"
-      relative: true
-    source: path
-    version: "0.0.4"
+      name: widgetbook_models
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.0.5"
   yaml:
     dependency: transitive
     description: