Feat: Add landscape mode for device orientation, details in [GitHub i…

…ssue #7](#7)
hm21 · Feb 21, 2024 · 22300ba · 22300ba
1 parent df8b815
commit 22300ba
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 53 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # Changelog
 
+## Version 2.4.2
+- **Feat:** Add landscape mode for device orientation, details in [GitHub issue #7](https://github.com/hm21/pro_image_editor/issues/7)
+
 ## Version 2.4.1
 - **Fixed:** Hotfix to close the editor with custom parameters, details in [GitHub issue #6](https://github.com/hm21/pro_image_editor/issues/6)
 

diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -129,12 +129,6 @@ class _MyHomePageState extends State<MyHomePage> {
                             Navigator.pop(context);
                           },
                           configs: ProImageEditorConfigs(
-                            activePreferredOrientations: [
-                              DeviceOrientation.portraitUp,
-                              DeviceOrientation.portraitDown,
-                              DeviceOrientation.landscapeLeft,
-                              DeviceOrientation.landscapeRight,
-                            ],
                             i18n: const I18n(
                               various: I18nVarious(
                                 loadingDialogMsg: 'Please wait...',

diff --git a/lib/models/editor_configs/pro_image_editor_configs.dart b/lib/models/editor_configs/pro_image_editor_configs.dart
@@ -23,9 +23,6 @@ class ProImageEditorConfigs {
   /// A unique hero tag for the Image Editor widget.
   final String heroTag;
 
-  /// The editor currently supports only 'portraitUp' orientation. After closing the editor, it will revert to your default settings.
-  final List<DeviceOrientation> activePreferredOrientations;
-
   /// Internationalization settings for the Image Editor.
   final I18n i18n;
 
@@ -85,12 +82,6 @@ class ProImageEditorConfigs {
   const ProImageEditorConfigs({
     this.theme,
     this.heroTag = 'Pro-Image-Editor-Hero',
-    this.activePreferredOrientations = const [
-      DeviceOrientation.portraitUp,
-      DeviceOrientation.portraitDown,
-      DeviceOrientation.landscapeLeft,
-      DeviceOrientation.landscapeRight,
-    ],
     this.i18n = const I18n(),
     this.helperLines = const HelperLines(),
     this.customWidgets = const ImageEditorCustomWidgets(),

diff --git a/lib/modules/paint_editor/paint_editor.dart b/lib/modules/paint_editor/paint_editor.dart
@@ -820,6 +820,7 @@ class PaintingEditorState extends State<PaintingEditor> {
           MediaQuery.of(context).size.height -
               MediaQuery.of(context).viewInsets.bottom -
               kToolbarHeight -
+              kBottomNavigationBarHeight -
               MediaQuery.of(context).padding.top -
               30,
         ),

diff --git a/lib/pro_image_editor_main.dart b/lib/pro_image_editor_main.dart
@@ -442,6 +442,9 @@ class ProImageEditorState extends State<ProImageEditor> {
   /// Indicates whether the browser's context menu was enabled before any changes.
   bool _browserContextMenuBeforeEnabled = false;
 
+  /// Store the last device Orientation
+  int _deviceOrientation = 0;
+
   @override
   void initState() {
     super.initState();
@@ -467,7 +470,6 @@ class ProImageEditorState extends State<ProImageEditor> {
         .then((value) => _deviceCanCustomVibrate = value ?? false);
 
     ServicesBinding.instance.keyboard.addHandler(_onKey);
-    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
     if (kIsWeb) {
       _browserContextMenuBeforeEnabled = BrowserContextMenu.enabled;
       BrowserContextMenu.disableContextMenu();
@@ -480,8 +482,6 @@ class ProImageEditorState extends State<ProImageEditor> {
     _bottomBarScrollCtrl.dispose();
     _scaleDebounce.dispose();
     _screenSizeDebouncer.dispose();
-    SystemChrome.setPreferredOrientations(
-        widget.configs.activePreferredOrientations);
     SystemChrome.setSystemUIOverlayStyle(_theme.brightness == Brightness.dark
         ? SystemUiOverlayStyle.light
         : SystemUiOverlayStyle.dark);
@@ -1771,43 +1771,48 @@ class ProImageEditorState extends State<ProImageEditor> {
           ),
         );
     if (_imageNeedDecode) _decodeImage();
-    return PopScope(
-      canPop: _editPosition <= 0 || _doneEditing,
-      onPopInvoked: (didPop) {
-        if (_editPosition > 0 && !_doneEditing) {
-          closeWarning();
-        }
-      },
-      child: LayoutBuilder(builder: (context, constraints) {
-        // Check if screensize changed to recalculate image size
-        if (_lastScreenSize.width != constraints.maxWidth ||
-            _lastScreenSize.height != constraints.maxHeight) {
-          _screenSizeDebouncer(() {
-            _decodeImage();
-          });
-          _lastScreenSize = Size(
-            constraints.maxWidth,
-            constraints.maxHeight,
-          );
-        }
+    return OrientationBuilder(builder: (context, orientation) {
+      if (_deviceOrientation != orientation.index) {
+        _deviceOrientation = orientation.index;
+      }
+      return PopScope(
+        canPop: _editPosition <= 0 || _doneEditing,
+        onPopInvoked: (didPop) {
+          if (_editPosition > 0 && !_doneEditing) {
+            closeWarning();
+          }
+        },
+        child: LayoutBuilder(builder: (context, constraints) {
+          // Check if screensize changed to recalculate image size
+          if (_lastScreenSize.width != constraints.maxWidth ||
+              _lastScreenSize.height != constraints.maxHeight) {
+            _screenSizeDebouncer(() {
+              _decodeImage();
+            });
+            _lastScreenSize = Size(
+              constraints.maxWidth,
+              constraints.maxHeight,
+            );
+          }
 
-        return AnnotatedRegion<SystemUiOverlayStyle>(
-          value: widget.configs.imageEditorTheme.uiOverlayStyle,
-          child: Theme(
-            data: _theme,
-            child: SafeArea(
-              child: Scaffold(
-                backgroundColor: widget.configs.imageEditorTheme.background,
-                resizeToAvoidBottomInset: false,
-                appBar: _buildAppBar(),
-                body: _buildBody(),
-                bottomNavigationBar: _buildBottomNavBar(),
+          return AnnotatedRegion<SystemUiOverlayStyle>(
+            value: widget.configs.imageEditorTheme.uiOverlayStyle,
+            child: Theme(
+              data: _theme,
+              child: SafeArea(
+                child: Scaffold(
+                  backgroundColor: widget.configs.imageEditorTheme.background,
+                  resizeToAvoidBottomInset: false,
+                  appBar: _buildAppBar(),
+                  body: _buildBody(),
+                  bottomNavigationBar: _buildBottomNavBar(),
+                ),
               ),
             ),
-          ),
-        );
-      }),
-    );
+          );
+        }),
+      );
+    });
   }
 
   PreferredSizeWidget? _buildAppBar() {

diff --git a/pubspec.yaml b/pubspec.yaml
@@ -1,6 +1,6 @@
 name: pro_image_editor
 description: "A Flutter image editor: Seamlessly enhance your images with user-friendly editing features."
-version: 2.4.1
+version: 2.4.2
 homepage: https://github.com/hm21/pro_image_editor/
 repository: https://github.com/hm21/pro_image_editor/
 issue_tracker: https://github.com/hm21/pro_image_editor/issues/