fix: Correctly calculate the layout children size

bluecherrydvr · Dec 31, 2024 · 7e5eee2 · 7e5eee2
1 parent d17e48c
commit 7e5eee2
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 43 deletions.
diff --git a/lib/screens/layouts/desktop/layout_view.dart b/lib/screens/layouts/desktop/layout_view.dart
@@ -357,8 +357,7 @@ class _LayoutViewState extends State<LayoutView> {
                 childAspectRatio: kHorizontalAspectRatio,
                 reorderable: widget.onReorder != null,
                 onReorder: widget.onReorder ?? (a, b) {},
-                padding:
-                    settings.isImmersiveMode ? EdgeInsets.zero : kGridPadding,
+                padding: EdgeInsets.zero,
                 children: devices.map((device) {
                   return DesktopDeviceTile(device: device);
                 }).toList(),
@@ -508,7 +507,9 @@ class _LayoutViewState extends State<LayoutView> {
                   ),
                 ),
               if (devices.isNotEmpty)
-                Expanded(child: Center(child: child))
+                Expanded(
+                  child: SizedBox.fromSize(size: Size.infinite, child: child),
+                )
               else
                 Expanded(
                   child: Center(child: Text('Add a camera')),

diff --git a/lib/widgets/reorderable_static_grid.dart b/lib/widgets/reorderable_static_grid.dart
@@ -22,7 +22,7 @@ import 'package:flutter/material.dart';
 import 'package:reorderables/reorderables.dart';
 
 /// The default spacing between the grid items
-const kGridInnerPadding = 8.0;
+const kGridInnerPadding = 4.0;
 
 /// The default padding for the grid
 const kGridPadding = EdgeInsetsDirectional.all(10.0);
@@ -69,7 +69,7 @@ class StaticGrid extends StatefulWidget {
 
 class StaticGridState extends State<StaticGrid> {
   List<Widget> realChildren = [];
-  int get gridRows => (realChildren.length / widget.crossAxisCount).round();
+  int get gridRows => (realChildren.length / widget.crossAxisCount).ceil();
   void generateRealChildren() {
     realChildren = [...widget.children];
 
@@ -108,53 +108,75 @@ class StaticGridState extends State<StaticGrid> {
     if (widget.children.isEmpty && widget.emptyChild != null) {
       return widget.emptyChild!;
     }
-
     return Padding(
-      padding: widget.padding.add(EdgeInsetsDirectional.only(
-        start: widget.crossAxisSpacing,
-        top: widget.mainAxisSpacing,
+      padding: widget.padding.add(EdgeInsetsDirectional.symmetric(
+        horizontal: widget.crossAxisSpacing,
+        vertical: widget.mainAxisSpacing,
       )),
       child: LayoutBuilder(builder: (context, constraints) {
-        var width = (constraints.biggest.width / widget.crossAxisCount) -
-            widget.mainAxisSpacing;
-
-        final height = width / widget.childAspectRatio;
-        final gridHeight =
-            height * gridRows + widget.crossAxisSpacing * gridRows;
-
-        // If the items heights summed will overflow the available space, reduce
-        // the width of the items, making it possible to fit all the items in the
-        // view
-        if (gridHeight > constraints.biggest.height) {
-          width -= gridHeight - constraints.biggest.height;
+        final availableWidth = constraints.biggest.width -
+            widget.padding.horizontal -
+            (widget.crossAxisCount - 1) * widget.crossAxisSpacing;
+
+        var childWidth = availableWidth / widget.crossAxisCount;
+        final childHeight = childWidth / widget.childAspectRatio;
+        double gridHeight =
+            childHeight * gridRows + widget.crossAxisSpacing * (gridRows - 1);
+
+        if (gridRows == 1) {
+          // For a single row, ensure childHeight does not exceed the
+          // available height
+          if (childHeight > constraints.biggest.height) {
+            final maxHeight = constraints.biggest.height;
+            childWidth = maxHeight * widget.childAspectRatio;
+            gridHeight = maxHeight;
+          }
+        } else {
+          // For multiple rows, calculate gridHeight and adjust childWidth if
+          // necessary
+          gridHeight =
+              childHeight * gridRows + widget.crossAxisSpacing * (gridRows - 1);
+
+          if (gridHeight > constraints.biggest.height) {
+            // Calculate the maximum height each child can have to fit
+            // within the available height
+            final maxHeight =
+                constraints.biggest.height / gridRows - widget.crossAxisSpacing;
+
+            // Calculate the new width based on the maximum height and
+            // the aspect ratio
+            childWidth = maxHeight * widget.childAspectRatio;
+          }
         }
 
-        return ScrollConfiguration(
-          behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false),
-          child: ReorderableWrap(
-            enableReorder: widget.reorderable,
-            spacing: widget.mainAxisSpacing,
-            runSpacing: widget.crossAxisSpacing,
-            minMainAxisCount: widget.crossAxisCount,
-            maxMainAxisCount: widget.crossAxisCount,
-            onReorder: widget.onReorder,
-            needsLongPressDraggable: isMobile,
-            alignment: WrapAlignment.center,
-            runAlignment: WrapAlignment.center,
-            crossAxisAlignment: WrapCrossAlignment.center,
-            scrollPhysics: const NeverScrollableScrollPhysics(),
-            children: List.generate(realChildren.length, (index) {
-              return SizedBox(
-                key: ValueKey(index),
-                width: width,
-                child: Center(
+        return SizedBox(
+          height: gridHeight,
+          child: ScrollConfiguration(
+            behavior:
+                ScrollConfiguration.of(context).copyWith(scrollbars: true),
+            child: ReorderableWrap(
+              enableReorder: widget.reorderable,
+              spacing: widget.mainAxisSpacing,
+              runSpacing: widget.crossAxisSpacing,
+              minMainAxisCount: widget.crossAxisCount,
+              maxMainAxisCount: widget.crossAxisCount,
+              onReorder: widget.onReorder,
+              needsLongPressDraggable: isMobile,
+              alignment: WrapAlignment.center,
+              runAlignment: WrapAlignment.center,
+              crossAxisAlignment: WrapCrossAlignment.center,
+              scrollPhysics: const NeverScrollableScrollPhysics(),
+              children: List.generate(realChildren.length, (index) {
+                return SizedBox(
+                  key: ValueKey(index),
+                  width: childWidth,
                   child: AspectRatio(
                     aspectRatio: widget.childAspectRatio,
                     child: realChildren[index],
                   ),
-                ),
-              );
-            }),
+                );
+              }),
+            ),
           ),
         );
       }),