diff --git a/README.md b/README.md index 1214f83..8562b11 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ Each example also comes with an embedded source-code view, so you don't have to ## Features - `ResizableContainer`s are fully nestable and support LTR _and_ RTL layouts -- Customize the length, thickness, alignment, and color of the divider(s) between children and the cursor displayed when hovering +- Customize the look and feel of the divider(s) between children - Respond to user interactions with `onHoverEnter` and `onHoverExit` for web/desktop and `onTapDown` and `onTapUp` for mobile - Programmatically set the sizes of the children through a `ResizableController` - Respond to changes in the sizes of the resizable children by listening to the `ResizableController` @@ -101,33 +101,38 @@ onTap: () => controller.setSizes(const [ ### ResizableChild -To add widgets to your container, you must provide a `List`, each of which contain the child `Widget` and an optional `ResizableSize`. +To add widgets to your container, you must provide a `List`, each of which contain the child `Widget`, an optional `ResizableDivider`, and an optional `ResizableSize`. ```dart children: [ - if (showNavBar) ...[ - const ResizableChild( - size: ResizableSize.expand(max: 350), - child: NavBarWidget(), + const ResizableChild( + divider: ResizableDivider( + thickness: 2, + color: Colors.blue, ), - ], + size: ResizableSize.expand(max: 350), + child: NavBarWidget(), + ), const ResizableChild( + divider: ResizableDivider( + thickness: 2, + padding: 3, + ), child: BodyWidget(), ), - if (showSidePanel) ...[ - const ResizableChild( - size: ResizableSize.ratio(0.25, min: 100), - child: SidePanelWidget(), - ), - ], + const ResizableChild( + size: ResizableSize.ratio(0.25, min: 100), + child: SidePanelWidget(), + ), ], ``` -In the example above, there are three `Widget`s added to the screen, two of which can be hidden based on state. +In the example above, the first two children have a custom `ResizableDivider` (read more about dividers in the [ResizableDivider](#resizabledivider) section). If no divider is set, a default one will be used. The divider provided to a child will be used between itself and the _next_ child in the list - the divider of the last child will not be used. -The first child, containing the `NavBarWidget`, has a maximum size of 350px. -The second child, containing the `BodyWidget`, is set to automatically expand to fill the available space via the default `ResizableSize.expand()` value. -The third child, containing the `SidePanelWidget`, is set to a ratio of 0.75 with a minimum size of 100px. +Each child also provides a custom size configuration: + * The first child, containing the `NavBarWidget`, has a maximum size of 350px. + * The second child, containing the `BodyWidget`, is set to automatically expand to fill the available space via the default `ResizableSize.expand()` value. + * The third child, containing the `SidePanelWidget`, is set to a ratio of 0.75 with a minimum size of 100px. The `size` parameter gives a directive of how to size the child during the initial layout, resizing, and screen size changes. See the [Resizable Size](#resizable-size) section below for more information. @@ -259,7 +264,7 @@ In this scenario, the first child would be given 2/3 of the total available spac Use the `ResizableDivider` class to customize the look and feel of the dividers between each of a container's children. -You can customize the `thickness`, `length`, `crossAxisAlignment`, `mainAxisAlignment`, and `color` of the divider, as well as display a custom mouse cursor on hover. You can also provide callbacks for the `onHoverEnter` and `onHoverExit` (web) and `onTapDown` and `onTapUp` (mobile) events to respond to user interactions. +You can customize the `thickness`, `length`, `crossAxisAlignment`, `mainAxisAlignment`, and `color` of the divider, as well as display a custom mouse cursor on hover and respond to `onHoverEnter` and `onHoverExit` (web) and `onTapDown` and `onTapUp` (mobile) events. ```dart divider: ResizableDivider( @@ -285,7 +290,7 @@ If the divider's length is less than the total available space, you can use the ![Cross-Axis Alignment](./doc/screenshot_cross_axis_start.png?raw=true 'Cross-Axis Alignment') -By adding a `padding` value, additional (empty) space will be added around/alongside the divider. The `mainAxisAlignment` property can then be used to control its position within this space on the main axis. For example, a vertical divider set to `MainAxisAlignment.start` will be positioned at the very left edge of its available space. +By adding a `padding` value, additional (empty) space will be added around/alongside the divider. The `mainAxisAlignment` property can then be used to control its position within this space on the main axis. For example, a vertical divider set to `MainAxisAlignment.start` will be positioned at the very left edge of the available space for a vertical divider. ![Main-Axis Alignment](./doc/screenshot_main_axis_start.png?raw=true 'Main-Axis Alignment') diff --git a/example/lib/screens/divider/custom_divider_example_screen.dart b/example/lib/screens/divider/custom_divider_example_screen.dart index b2522b3..bf21df0 100644 --- a/example/lib/screens/divider/custom_divider_example_screen.dart +++ b/example/lib/screens/divider/custom_divider_example_screen.dart @@ -137,22 +137,22 @@ class _CustomDividerExampleScreenState Expanded( child: ResizableContainer( direction: Axis.horizontal, - divider: ResizableDivider( - color: hovered - ? Theme.of(context).colorScheme.primary - : Theme.of(context).colorScheme.inversePrimary, - thickness: thickness, - padding: padding, - crossAxisAlignment: crossAxisAlignment, - mainAxisAlignment: mainAxisAlignment, - length: ResizableSize.ratio(length), - onHoverEnter: () => setState(() => hovered = true), - onHoverExit: () => setState(() => hovered = false), - onTapDown: () => setState(() => hovered = true), - onTapUp: () => setState(() => hovered = false), - ), children: [ ResizableChild( + divider: ResizableDivider( + color: hovered + ? Theme.of(context).colorScheme.primary + : Theme.of(context).colorScheme.inversePrimary, + thickness: thickness, + padding: padding, + crossAxisAlignment: crossAxisAlignment, + mainAxisAlignment: mainAxisAlignment, + length: ResizableSize.ratio(length), + onHoverEnter: () => setState(() => hovered = true), + onHoverExit: () => setState(() => hovered = false), + onTapDown: () => setState(() => hovered = true), + onTapUp: () => setState(() => hovered = false), + ), child: ColoredBox( color: Theme.of(context).colorScheme.primaryContainer, child: const Center(child: Text('Left')), diff --git a/lib/src/layout/resizable_layout.dart b/lib/src/layout/resizable_layout.dart index 49bec7a..377aa57 100644 --- a/lib/src/layout/resizable_layout.dart +++ b/lib/src/layout/resizable_layout.dart @@ -2,6 +2,7 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/rendering.dart'; import 'package:flutter/widgets.dart'; import 'package:flutter_resizable_container/flutter_resizable_container.dart'; +import 'package:flutter_resizable_container/src/extensions/iterable_ext.dart'; import 'package:flutter_resizable_container/src/layout/resizable_layout_direction.dart'; import 'package:flutter_resizable_container/src/resizable_size.dart'; @@ -15,14 +16,12 @@ class ResizableLayout extends MultiChildRenderObjectWidget { super.key, required super.children, required this.direction, - required this.divider, required this.onComplete, required this.sizes, required this.resizableChildren, }); final Axis direction; - final ResizableDivider divider; final ValueChanged> onComplete; final List sizes; final List resizableChildren; @@ -31,7 +30,6 @@ class ResizableLayout extends MultiChildRenderObjectWidget { RenderObject createRenderObject(BuildContext context) { return ResizableLayoutRenderObject( layoutDirection: ResizableLayoutDirection.forAxis(direction), - divider: divider, sizes: sizes, onComplete: onComplete, resizableChildren: resizableChildren, @@ -45,7 +43,6 @@ class ResizableLayout extends MultiChildRenderObjectWidget { ) { renderObject ..layoutDirection = ResizableLayoutDirection.forAxis(direction) - ..divider = divider ..sizes = sizes ..onComplete = onComplete ..resizableChildren = resizableChildren; @@ -56,25 +53,21 @@ class ResizableLayoutRenderObject extends RenderBox with _ContainerMixin, _DefaultsMixin { ResizableLayoutRenderObject({ required ResizableLayoutDirection layoutDirection, - required ResizableDivider divider, required List sizes, required ValueChanged> onComplete, required List resizableChildren, }) : _layoutDirection = layoutDirection, - _divider = divider, _sizes = sizes, _onComplete = onComplete, _resizableChildren = resizableChildren; ResizableLayoutDirection _layoutDirection; - ResizableDivider _divider; List _sizes; ValueChanged> _onComplete; List _resizableChildren; double _currentPosition = 0.0; ResizableLayoutDirection get layoutDirection => _layoutDirection; - ResizableDivider get divider => _divider; List get sizes => _sizes; ValueChanged> get onComplete => _onComplete; List get resizableChildren => _resizableChildren; @@ -88,15 +81,6 @@ class ResizableLayoutRenderObject extends RenderBox markNeedsLayout(); } - set divider(ResizableDivider divider) { - if (_divider == divider) { - return; - } - - _divider = divider; - markNeedsLayout(); - } - set sizes(List sizes) { if (listEquals(_sizes, sizes)) { return; @@ -135,7 +119,6 @@ class ResizableLayoutRenderObject extends RenderBox final children = getChildrenAsList(); final dividerSpace = _getDividerSpace(); - final dividerConstraints = _getDividerConstraints(); final pixelSpace = _getPixelsSpace(); final shrinkSpace = _getShrinkSpace(children); final availableRatioSpace = _getAvailableRatioSpace( @@ -176,7 +159,10 @@ class ResizableLayoutRenderObject extends RenderBox if (i < childCount - 1) { final divider = children[i + 1]; - final dividerSize = _layoutChild(divider, dividerConstraints); + final dividerSize = _layoutChild( + divider, + _getDividerConstraints(resizableChildren[i ~/ 2].divider), + ); finalSizes.add(dividerSize); } } @@ -221,12 +207,14 @@ class ResizableLayoutRenderObject extends RenderBox } double _getDividerSpace() { - final dividerThickness = divider.thickness + divider.padding; - final dividerCount = childCount ~/ 2; - return dividerThickness * dividerCount; + return resizableChildren + .take(resizableChildren.length - 1) + .map((child) => child.divider.thickness + child.divider.padding) + .sum((x) => x) + .toDouble(); } - BoxConstraints _getDividerConstraints() { + BoxConstraints _getDividerConstraints(ResizableDivider divider) { return BoxConstraints.tight( layoutDirection.getSize(divider.thickness + divider.padding, constraints), ); diff --git a/lib/src/resizable_child.dart b/lib/src/resizable_child.dart index 6636de7..8fc8a71 100644 --- a/lib/src/resizable_child.dart +++ b/lib/src/resizable_child.dart @@ -1,5 +1,5 @@ import 'package:flutter/material.dart'; -import 'package:flutter_resizable_container/src/resizable_size.dart'; +import 'package:flutter_resizable_container/flutter_resizable_container.dart'; /// Controls the sizing parameters for the [child] Widget. class ResizableChild { @@ -7,6 +7,7 @@ class ResizableChild { const ResizableChild({ required this.child, this.size = const ResizableSize.expand(), + this.divider = const ResizableDivider(), }); /// The size of the corresponding widget. May use a ratio of the @@ -22,21 +23,33 @@ class ResizableChild { /// /// // Auto-fill available space /// size: const ResizableSize.expand(), + /// + /// // Conform to the child's intrinsic size + /// size: const ResizableSize.shrink(), /// ``` final ResizableSize size; - /// The child [Widget] + /// The child [Widget] to be displayed. final Widget child; + /// The divider configuration to be used after this child. + /// + /// If not provided, the default divider will be used. + /// + /// If this is the last child, the divider will not be used. + final ResizableDivider divider; + @override - String toString() => 'ResizableChildData(size: $size, child: $child)'; + String toString() => + 'ResizableChildData(size: $size, child: $child, divider: $divider)'; @override operator ==(Object other) => other is ResizableChild && other.size == size && + other.divider == divider && other.child.runtimeType == child.runtimeType; @override - int get hashCode => Object.hash(size, child); + int get hashCode => Object.hash(size, child, divider); } diff --git a/lib/src/resizable_container.dart b/lib/src/resizable_container.dart index 05d76c1..48cd1bd 100644 --- a/lib/src/resizable_container.dart +++ b/lib/src/resizable_container.dart @@ -21,8 +21,7 @@ class ResizableContainer extends StatefulWidget { required this.children, required this.direction, this.controller, - ResizableDivider? divider, - }) : divider = divider ?? const ResizableDivider(); + }); /// A list of resizable [ResizableChild] containing the child [Widget]s and /// their sizing configuration. @@ -34,9 +33,6 @@ class ResizableContainer extends StatefulWidget { /// The direction along which the child widgets will be laid and resized. final Axis direction; - /// Configuration values for the dividing space/line between this container's [children]. - final ResizableDivider divider; - @override State createState() => _ResizableContainerState(); } @@ -57,13 +53,12 @@ class _ResizableContainerState extends State { void didUpdateWidget(covariant ResizableContainer oldWidget) { final didChildrenChange = !listEquals(oldWidget.children, widget.children); final didDirectionChange = oldWidget.direction != widget.direction; - final didDividerChange = oldWidget.divider != widget.divider; if (didChildrenChange) { controller.setChildren(widget.children); } - if (didChildrenChange || didDirectionChange || didDividerChange) { + if (didChildrenChange || didDirectionChange) { manager.setNeedsLayout(); } @@ -99,14 +94,13 @@ class _ResizableContainerState extends State { }); }, sizes: controller.sizes, - divider: widget.divider, resizableChildren: widget.children, children: [ for (var i = 0; i < widget.children.length; i++) ...[ widget.children[i].child, if (i < widget.children.length - 1) ...[ ResizableContainerDivider.placeholder( - config: widget.divider, + config: widget.children[i].divider, direction: widget.direction, ), ], @@ -144,7 +138,7 @@ class _ResizableContainerState extends State { ), if (i < widget.children.length - 1) ...[ ResizableContainerDivider( - config: widget.divider, + config: widget.children[i].divider, direction: widget.direction, onResizeUpdate: (delta) => manager.adjustChildSize( index: i, @@ -164,9 +158,12 @@ class _ResizableContainerState extends State { double _getAvailableSpace(BoxConstraints constraints) { final totalSpace = constraints.maxForDirection(widget.direction); - final numDividers = widget.children.length - 1; - final dividerSpace = numDividers * widget.divider.thickness + - numDividers * widget.divider.padding; + final dividerSpace = widget.children + .take(widget.children.length - 1) + .map((child) => child.divider) + .map((divider) => divider.thickness + divider.padding) + .sum((x) => x); + return totalSpace - dividerSpace; } diff --git a/lib/src/resizable_divider.dart b/lib/src/resizable_divider.dart index b63050d..597f9cf 100644 --- a/lib/src/resizable_divider.dart +++ b/lib/src/resizable_divider.dart @@ -1,5 +1,5 @@ import 'package:flutter/material.dart'; -import 'package:flutter_resizable_container/flutter_resizable_container.dart'; +import 'package:flutter_resizable_container/src/resizable_size.dart'; class ResizableDivider { const ResizableDivider({ @@ -14,7 +14,11 @@ class ResizableDivider { this.cursor, this.mainAxisAlignment = MainAxisAlignment.center, this.crossAxisAlignment = CrossAxisAlignment.center, - }) : assert(thickness > 0, '[thickness] must be > 0.'); + }) : assert(thickness > 0, '[thickness] must be > 0.'), + assert( + length is! ResizableSizeShrink, + 'length does not support the "shrink" size', + ); /// The thickness of the line drawn within the divider. /// @@ -67,4 +71,54 @@ class ResizableDivider { /// The cursor to display when hovering over this divider. final MouseCursor? cursor; + + @override + String toString() { + return 'ResizableDividerData(' + 'thickness: $thickness, ' + 'length: $length, ' + 'padding: $padding, ' + 'color: $color, ' + 'onHoverEnter: $onHoverEnter, ' + 'onHoverExit: $onHoverExit, ' + 'onTapDown: $onTapDown, ' + 'onTapUp: $onTapUp, ' + 'cursor: $cursor, ' + 'mainAxisAlignment: $mainAxisAlignment, ' + 'crossAxisAlignment: $crossAxisAlignment' + ')'; + } + + @override + bool operator ==(Object other) { + if (identical(this, other)) return true; + + return other is ResizableDivider && + other.thickness == thickness && + other.length == length && + other.padding == padding && + other.color == color && + other.onHoverEnter == onHoverEnter && + other.onHoverExit == onHoverExit && + other.onTapDown == onTapDown && + other.onTapUp == onTapUp && + other.cursor == cursor && + other.mainAxisAlignment == mainAxisAlignment && + other.crossAxisAlignment == crossAxisAlignment; + } + + @override + int get hashCode { + return thickness.hashCode ^ + length.hashCode ^ + padding.hashCode ^ + color.hashCode ^ + onHoverEnter.hashCode ^ + onHoverExit.hashCode ^ + onTapDown.hashCode ^ + onTapUp.hashCode ^ + cursor.hashCode ^ + mainAxisAlignment.hashCode ^ + crossAxisAlignment.hashCode; + } } diff --git a/test/resizable_container_test.dart b/test/resizable_container_test.dart index 33f4f3b..fdf52ce 100644 --- a/test/resizable_container_test.dart +++ b/test/resizable_container_test.dart @@ -491,11 +491,11 @@ void main() { body: ResizableContainer( controller: controller, direction: Axis.horizontal, - divider: const ResizableDivider( - thickness: dividerWidth, - ), children: const [ ResizableChild( + divider: ResizableDivider( + thickness: dividerWidth, + ), size: ResizableSize.ratio(0.5), child: SizedBox.expand( key: Key('BoxA'), @@ -545,11 +545,11 @@ void main() { body: ResizableContainer( controller: controller, direction: Axis.horizontal, - divider: const ResizableDivider( - thickness: dividerWidth, - ), children: const [ ResizableChild( + divider: ResizableDivider( + thickness: dividerWidth, + ), child: SizedBox.expand( key: Key('BoxA'), ), @@ -626,12 +626,12 @@ void main() { const MaterialApp( home: Scaffold( body: ResizableContainer( - divider: ResizableDivider( - thickness: dividerWidth, - ), direction: Axis.horizontal, children: [ ResizableChild( + divider: ResizableDivider( + thickness: dividerWidth, + ), size: ResizableSize.expand(max: 700), child: SizedBox.expand( key: Key('BoxA'), @@ -670,12 +670,12 @@ void main() { const MaterialApp( home: Scaffold( body: ResizableContainer( - divider: ResizableDivider( - thickness: dividerWidth, - ), direction: Axis.horizontal, children: [ ResizableChild( + divider: ResizableDivider( + thickness: dividerWidth, + ), size: ResizableSize.expand(min: 200), child: SizedBox.expand( key: Key('BoxA'), @@ -745,12 +745,11 @@ void main() { body: ResizableContainer( controller: controller, direction: Axis.horizontal, - divider: const ResizableDivider( - thickness: 1, - padding: 0, - ), children: const [ ResizableChild( + divider: ResizableDivider( + thickness: 1, + ), size: ResizableSize.expand(), child: SizedBox.expand( key: Key('BoxA'), @@ -800,12 +799,11 @@ void main() { body: ResizableContainer( controller: controller, direction: Axis.horizontal, - divider: const ResizableDivider( - thickness: 1, - padding: 0, - ), children: const [ ResizableChild( + divider: ResizableDivider( + thickness: 1, + ), size: ResizableSize.shrink(), child: SizedBox( width: 200, @@ -860,12 +858,11 @@ void main() { body: ResizableContainer( controller: controller, direction: Axis.horizontal, - divider: const ResizableDivider( - thickness: 1, - padding: 0, - ), children: const [ ResizableChild( + divider: ResizableDivider( + thickness: 1, + ), size: ResizableSize.shrink(), child: SizedBox( width: 200, @@ -920,12 +917,11 @@ void main() { body: ResizableContainer( controller: controller, direction: Axis.horizontal, - divider: const ResizableDivider( - thickness: 1, - padding: 0, - ), children: const [ ResizableChild( + divider: ResizableDivider( + thickness: 1, + ), size: ResizableSize.shrink(), child: SizedBox( width: 200, @@ -980,12 +976,11 @@ void main() { body: ResizableContainer( controller: controller, direction: Axis.horizontal, - divider: const ResizableDivider( - thickness: 1, - padding: 0, - ), children: const [ ResizableChild( + divider: ResizableDivider( + thickness: 1, + ), size: ResizableSize.shrink(), child: SizedBox( width: 200, @@ -1039,12 +1034,11 @@ void main() { body: ResizableContainer( controller: controller, direction: Axis.horizontal, - divider: const ResizableDivider( - thickness: 1, - padding: 0, - ), children: const [ ResizableChild( + divider: ResizableDivider( + thickness: 1, + ), size: ResizableSize.pixels(200), child: SizedBox( key: Key('BoxA'), @@ -1097,11 +1091,11 @@ void main() { child: Scaffold( body: ResizableContainer( direction: Axis.horizontal, - divider: const ResizableDivider( - thickness: 1, - ), children: const [ ResizableChild( + divider: ResizableDivider( + thickness: 1, + ), size: ResizableSize.expand(), child: SizedBox.expand( key: Key('BoxA'), @@ -1173,12 +1167,11 @@ void main() { body: ResizableContainer( controller: controller, direction: direction, - divider: const ResizableDivider( - thickness: 1, - padding: 0, - ), children: const [ ResizableChild( + divider: ResizableDivider( + thickness: 1, + ), size: ResizableSize.expand(), child: SizedBox.expand( key: Key('BoxA'), @@ -1252,12 +1245,11 @@ class __ToggleChildAppState extends State<_ToggleChildApp> { ), body: ResizableContainer( direction: Axis.horizontal, - divider: const ResizableDivider( - thickness: 2, - padding: 0, - ), children: [ const ResizableChild( + divider: ResizableDivider( + thickness: 2, + ), size: ResizableSize.expand(flex: 2), child: SizedBox.expand( key: Key('ChildA'), diff --git a/test/resizable_divider_test.dart b/test/resizable_divider_test.dart index ab5c2db..1b98aa8 100644 --- a/test/resizable_divider_test.dart +++ b/test/resizable_divider_test.dart @@ -30,14 +30,14 @@ void main() { body: ResizableContainer( controller: ResizableController(), direction: Axis.horizontal, - divider: ResizableDivider( - onHoverEnter: () => hovered = true, - ), - children: const [ + children: [ ResizableChild( + divider: ResizableDivider( + onHoverEnter: () => hovered = true, + ), child: SizedBox.expand(), ), - ResizableChild( + const ResizableChild( child: SizedBox.expand(), ), ], @@ -77,16 +77,16 @@ void main() { body: ResizableContainer( controller: ResizableController(), direction: Axis.horizontal, - divider: ResizableDivider( - onHoverEnter: () => hovered = true, - length: const ResizableSize.ratio(0.1), - crossAxisAlignment: CrossAxisAlignment.start, - ), - children: const [ + children: [ ResizableChild( + divider: ResizableDivider( + onHoverEnter: () => hovered = true, + length: const ResizableSize.ratio(0.1), + crossAxisAlignment: CrossAxisAlignment.start, + ), child: SizedBox.expand(), ), - ResizableChild( + const ResizableChild( child: SizedBox.expand(), ), ], @@ -123,14 +123,14 @@ void main() { body: ResizableContainer( controller: ResizableController(), direction: Axis.horizontal, - divider: ResizableDivider( - onHoverExit: () => hovered = false, - ), - children: const [ + children: [ ResizableChild( + divider: ResizableDivider( + onHoverExit: () => hovered = false, + ), child: SizedBox.expand(), ), - ResizableChild( + const ResizableChild( child: SizedBox.expand(), ), ], @@ -171,14 +171,14 @@ void main() { body: ResizableContainer( controller: ResizableController(), direction: Axis.horizontal, - divider: ResizableDivider( - onTapDown: () => dividerTappedDown = true, - ), - children: const [ + children: [ ResizableChild( + divider: ResizableDivider( + onTapDown: () => dividerTappedDown = true, + ), child: SizedBox.expand(), ), - ResizableChild( + const ResizableChild( child: SizedBox.expand(), ), ], @@ -222,14 +222,14 @@ void main() { ResizableContainer( controller: ResizableController(), direction: Axis.horizontal, - divider: ResizableDivider( - onTapDown: () => dividerTappedDown = true, - ), - children: const [ + children: [ ResizableChild( + divider: ResizableDivider( + onTapDown: () => dividerTappedDown = true, + ), child: SizedBox.expand(), ), - ResizableChild( + const ResizableChild( child: SizedBox.expand(), ), ], @@ -264,14 +264,14 @@ void main() { body: ResizableContainer( controller: ResizableController(), direction: Axis.horizontal, - divider: ResizableDivider( - onTapUp: () => tappedUp = true, - ), - children: const [ + children: [ ResizableChild( + divider: ResizableDivider( + onTapUp: () => tappedUp = true, + ), child: SizedBox.expand(), ), - ResizableChild( + const ResizableChild( child: SizedBox.expand(), ), ], @@ -305,14 +305,14 @@ void main() { body: ResizableContainer( controller: ResizableController(), direction: Axis.horizontal, - divider: ResizableDivider( - onTapUp: () => tappedUp = true, - ), - children: const [ + children: [ ResizableChild( + divider: ResizableDivider( + onTapUp: () => tappedUp = true, + ), child: SizedBox.expand(), ), - ResizableChild( + const ResizableChild( child: SizedBox.expand(), ), ],