fix(zoom-paint-editor): prevent bottombar from wrapping items to a ne…

…w line Resolved an issue in the paint editor where the bottombar wrapped items to a new line. resolve #152
hm21 · Jul 5, 2024 · 55f187f · 55f187f
1 parent 7a89d30
commit 55f187f
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 21 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # Changelog
 
+## Version 4.2.5
+- **fix(zoom-paint-editor)**: Prevent bottombar from wrapping items to a new line. This resolves issue [#152](https://github.com/hm21/pro_image_editor/issues/152).
+
 ## Version 4.2.4
 - **fix(import)**: Ensure to set correct emoji size after image rotation and history restore. This resolves issue [#151](https://github.com/hm21/pro_image_editor/issues/151).
 

diff --git a/lib/modules/paint_editor/paint_editor.dart b/lib/modules/paint_editor/paint_editor.dart
@@ -888,6 +888,11 @@ class PaintingEditorState extends State<PaintingEditor>
 
     if (paintModes.length <= 1) return const SizedBox.shrink();
 
+    double minWidth = min(MediaQuery.of(context).size.width, 600);
+    double maxWidth = max(
+        (paintModes.length + (paintEditorConfigs.editorIsZoomable ? 1 : 0)) *
+            80,
+        minWidth);
     return Theme(
       data: theme,
       child: Scrollbar(
@@ -904,8 +909,10 @@ class PaintingEditorState extends State<PaintingEditor>
               scrollDirection: Axis.horizontal,
               child: ConstrainedBox(
                 constraints: BoxConstraints(
-                  minWidth: min(MediaQuery.of(context).size.width, 500),
-                  maxWidth: 500,
+                  minWidth: minWidth,
+                  maxWidth: MediaQuery.of(context).size.width > 660
+                      ? maxWidth
+                      : double.infinity,
                 ),
                 child: StatefulBuilder(builder: (context, setStateBottomBar) {
                   Color getColor(PaintModeE mode) {
@@ -919,6 +926,7 @@ class PaintingEditorState extends State<PaintingEditor>
                   return Wrap(
                     direction: Axis.horizontal,
                     alignment: WrapAlignment.spaceAround,
+                    runAlignment: WrapAlignment.spaceAround,
                     crossAxisAlignment: WrapCrossAlignment.center,
                     children: <Widget>[
                       if (paintEditorConfigs.editorIsZoomable) ...[
@@ -952,24 +960,21 @@ class PaintingEditorState extends State<PaintingEditor>
                       ],
                       ...List.generate(
                         paintModes.length,
-                        (index) => Builder(
-                          builder: (_) {
-                            PaintModeBottomBarItem item = paintModes[index];
-                            Color color = getColor(item.mode);
-
-                            return FlatIconTextButton(
-                              label: Text(
-                                item.label,
-                                style: TextStyle(fontSize: 10.0, color: color),
-                              ),
-                              icon: Icon(item.icon, color: color),
-                              onPressed: () {
-                                setMode(item.mode);
-                                setStateBottomBar(() {});
-                              },
-                            );
-                          },
-                        ),
+                        (index) {
+                          PaintModeBottomBarItem item = paintModes[index];
+                          Color color = getColor(item.mode);
+                          return FlatIconTextButton(
+                            label: Text(
+                              item.label,
+                              style: TextStyle(fontSize: 10.0, color: color),
+                            ),
+                            icon: Icon(item.icon, color: color),
+                            onPressed: () {
+                              setMode(item.mode);
+                              setStateBottomBar(() {});
+                            },
+                          );
+                        },
                       ),
                     ],
                   );

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: 4.2.4
+version: 4.2.5
 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/