From 7e5eee2635a4a3da69b9178c1bccd1aec1127ee9 Mon Sep 17 00:00:00 2001 From: Bruno D'Luka Date: Tue, 31 Dec 2024 02:39:18 -0300 Subject: [PATCH] fix: Correctly calculate the layout children size --- lib/screens/layouts/desktop/layout_view.dart | 7 +- lib/widgets/reorderable_static_grid.dart | 102 +++++++++++-------- 2 files changed, 66 insertions(+), 43 deletions(-) diff --git a/lib/screens/layouts/desktop/layout_view.dart b/lib/screens/layouts/desktop/layout_view.dart index 4841e375..9d2c418f 100644 --- a/lib/screens/layouts/desktop/layout_view.dart +++ b/lib/screens/layouts/desktop/layout_view.dart @@ -357,8 +357,7 @@ class _LayoutViewState extends State { 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 { ), ), 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 index 754f90f9..3e2b93e7 100644 --- 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 { List 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 { 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], ), - ), - ); - }), + ); + }), + ), ), ); }),