fix/resizable-on-resize (#121)

nank1ro · Aug 9, 2024 · 89678d1 · 89678d1
1 parent ad138ef
commit 89678d1
Show file tree

Hide file tree

Showing 5 changed files with 302 additions and 272 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
-## 0.7.4
+## 0.8.0
 
+- **BREAKING CHANGE**: Refactor `ShadResizablePanelGroup` in order to react to window resize correctly. The sizes have been normalized. You don't need to provide anymore a pixel size, but a value between 0 and 1 which indicates the percentage of the available space.
 - Add `onChanged` to `ShadTabs`.
 - Fix `maxWidth` missing in `ShadSelectForlField`.
 

diff --git a/example/lib/pages/resizable.dart b/example/lib/pages/resizable.dart
@@ -18,52 +18,56 @@ class _ResizablePageState extends State<ResizablePage> {
     return BaseScaffold(
       appBarTitle: 'Resizable',
       children: [
-        ShadDecorator(
-          decoration: ShadDecoration(
-            merge: false,
-            border: ShadBorder.all(
-              color: theme.colorScheme.border,
-              radius: theme.radius,
+        SizedBox(
+          width: 300,
+          height: 200,
+          child: ShadDecorator(
+            decoration: ShadDecoration(
+              merge: false,
+              border: ShadBorder.all(
+                color: theme.colorScheme.border,
+                radius: theme.radius,
+              ),
             ),
-          ),
-          child: ClipRRect(
-            borderRadius: theme.radius,
-            child: ShadResizablePanelGroup(
-              mainAxisSize: MainAxisSize.min,
-              height: 200,
-              showHandle: true,
-              children: [
-                ShadResizablePanel(
-                  defaultSize: 150,
-                  minSize: 50,
-                  maxSize: 300,
-                  child: Center(
-                    child: Text('One', style: theme.textTheme.large),
+            child: ClipRRect(
+              borderRadius: theme.radius,
+              child: ShadResizablePanelGroup(
+                mainAxisSize: MainAxisSize.min,
+                showHandle: true,
+                children: [
+                  ShadResizablePanel(
+                    defaultSize: .5,
+                    minSize: 0.1,
+                    maxSize: 0.8,
+                    child: Center(
+                      child: Text('One', style: theme.textTheme.large),
+                    ),
                   ),
-                ),
-                ShadResizablePanel(
-                  defaultSize: 150,
-                  child: ShadResizablePanelGroup(
-                    axis: Axis.vertical,
-                    showHandle: true,
-                    children: [
-                      ShadResizablePanel(
-                        defaultSize: 50,
-                        child: Center(
-                            child: Text('Two', style: theme.textTheme.large)),
-                      ),
-                      ShadResizablePanel(
-                        defaultSize: 150,
-                        child: Align(
-                            child: Text('Three', style: theme.textTheme.large)),
-                      ),
-                    ],
+                  ShadResizablePanel(
+                    defaultSize: 0.5,
+                    child: ShadResizablePanelGroup(
+                      axis: Axis.vertical,
+                      showHandle: true,
+                      children: [
+                        ShadResizablePanel(
+                          defaultSize: 0.4,
+                          child: Center(
+                              child: Text('Two', style: theme.textTheme.large)),
+                        ),
+                        ShadResizablePanel(
+                          defaultSize: 0.6,
+                          child: Align(
+                              child:
+                                  Text('Three', style: theme.textTheme.large)),
+                        ),
+                      ],
+                    ),
                   ),
-                ),
-              ],
+                ],
+              ),
             ),
           ),
-        ),
+        )
       ],
     );
   }