KeepTallest class

Widget KeepTallest tracks its child's height and never visually shrinks its own height below the tallest height observed so far. Growing is always instantaneous.

Problem

When multiple children of different heights share the same space (e.g. tab content), switching from a tall child to a short one causes the surrounding layout to collapse, which can feel jarring: Content below jumps up, scroll position shifts, etc. It would be good if we could add some space below the shorter child to match the taller height, so that the layout doesn't shift when switching between them. This space doesn't need to be there all the time. It can be added the moment we go from taller to shorter. Optionally, we can shrink it with an animation.

Solution

Wrap the variable-height content in KeepTallest. The widget measures its child's natural height (ignoring its own min-height constraint) and keeps the container at least as tall as the tallest child seen so far. If the child grows, the container grows immediately. If the child shrinks, the container stays at the previous (larger) height.

For example, if the child's height changes through: 100 → 300 → 200 → 0 → 1000 → 100 the container height will be: 100 → 300 → 300 → 300 → 1000 → 1000

Optional animated shrinking

Set shrink to true to allow the container to eventually shrink back to the child's height. When the child becomes smaller:

The widget waits shrinkDelay (default 200 ms).
Then animates down to the child's current height over duration (default 500 ms) using curve (default Curves.easeInOut).

If the child grows again at any point during the delay or animation, the container immediately snaps to the new larger height (growing is never animated).

Use minShrinkDifference to suppress small shrinks. The animated shrink only triggers when the difference between the current container height and the child's natural height exceeds this threshold. With the default of 0, every decrease triggers a shrink.

Route visibility

When the widget's route becomes inactive (e.g. another route is pushed on top), KeepTallest immediately snaps to the child's natural height without animation or delay, regardless of all other parameters. This is detected via TickerMode. When the user pops back, the layout is already correct, with no stale extra space or jarring animation on return.

PageView and TabBarView

PageView and TabBarView don't automatically stop tickers for offscreen pages, so if you want KeepTallest to immediately snap the child's height whe a page becomes invisible, you need to wrap the page in a TickerMode and turn it off when the page is not visible. Note this has the added benefit of making your app more performant by stopping tickers and other active animations on pages that are completely offscreen. Example:

class TickerPageViewExample extends StatefulWidget {
  const TickerPageViewExample({super.key});

  @override
  State<TickerPageViewExample> createState() =>
      _TickerPageViewExampleState();
}

class _TickerPageViewExampleState extends State<TickerPageViewExample> {
  final _controller = PageController();

  bool _isVisible(int index, double page) {
    // A page is visible if it's less than 1 page away
    return (page - index).abs() < 1.0;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('TickerMode + PageView')),
      body: AnimatedBuilder(
        animation: _controller,
        builder: (context, _) {
          final page = _controller.hasClients &&
                  _controller.position.hasViewportDimension
              ? (_controller.page ?? 0.0)
              : 0.0;

          return PageView(
            controller: _controller,
            children: List.generate(3, (index) {
              return TickerMode(
                enabled: _isVisible(index, page),
                child: _DemoPage(index: index),
              );
            }),
          );
        },
      ),
    );
  }
}

class _DemoPage extends StatefulWidget {
  final int index;

  const _DemoPage({required this.index});

  @override
  State<_DemoPage> createState() => _DemoPageState();
}

class _DemoPageState extends State<_DemoPage> with SingleTickerProviderStateMixin {
  late final AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 2),
    )..repeat();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: RotationTransition(
        turns: _controller,
        child: Text(
          'Page ${widget.index}',
          style: const TextStyle(fontSize: 32),
        ),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

Inheritance

Available extensions

Constructors

KeepTallest({Key? key, required Widget child, bool shrink = false, Duration duration = const Duration(milliseconds: 500), Curve curve = Curves.easeInOut, Duration shrinkDelay = const Duration(milliseconds: 200), double minShrinkDifference = 0}): const

Properties

child → Widget: final
curve → Curve: The animation curve for the shrink transition. Only used when shrink is true. Defaults to Curves.easeInOut.
final
duration → Duration: How long the shrink animation takes. Only used when shrink is true. Defaults to 500ms.
final
hashCode → int: The hash code for this object.
no setterinherited
key → Key?: Controls how one widget replaces another widget in the tree.
finalinherited
makeRefreshable → Widget: Available on Widget?, provided by the WidgetExtension extension
Make your any widget refreshable with RefreshIndicator on top
no setter
minShrinkDifference → double: The minimum difference between the current height and the child's height required to trigger a shrink. If the difference is less than or equal to this value, the widget keeps its current height instead of shrinking. Only used when shrink is true. Must be >= 0. Defaults to 0 (always shrinks).
final
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
shrink → bool: If false (default), the widget never shrinks — it keeps the largest height seen. If true, when the child gets smaller, the widget will wait shrinkDelay and then animate down to the child's height over duration using curve. Growing is always instantaneous regardless of this flag.
final
shrinkDelay → Duration: The delay before the shrink animation starts after the child becomes smaller. Only used when shrink is true. Defaults to 200ms.
final

Methods

addMaterialWidget() → Material: Available on Widget, provided by the GenericExtensions extension
addTooltipWidget(String toolTip) → Tooltip: Available on Widget, provided by the GenericExtensions extension
animate({Key? key, List<Effect>? effects, AnimateCallback? onInit, AnimateCallback? onPlay, AnimateCallback? onComplete, bool? autoPlay, Duration? delay, AnimationController? controller, Adapter? adapter, double? target, double? value}) → Animate: Available on Widget, provided by the AnimateWidgetExtensions extension
Wraps the target Widget in an Animate instance, and returns the instance for chaining calls. Ex. myWidget.animate() is equivalent to Animate(child: myWidget).
borderRadius([BorderRadiusGeometry? borderRadius]) → Widget: Available on Widget, provided by the GenericExtensions extension
boxDecoration([BoxDecoration? boxDecoration]) → Widget: Available on Widget, provided by the GenericExtensions extension
center({double? heightFactor, double? widthFactor}) → Widget: Available on Widget?, provided by the WidgetExtension extension
set parent widget in center
colorFilter([ColorFilter? colorFilter]) → Widget: Available on Widget, provided by the GenericExtensions extension
set parent widget in center
cornerRadiusWithClipRRect(double radius) → ClipRRect: Available on Widget?, provided by the WidgetExtension extension
add corner radius
cornerRadiusWithClipRRectOnly({int bottomLeft = 0, int bottomRight = 0, int topLeft = 0, int topRight = 0}) → ClipRRect: Available on Widget?, provided by the WidgetExtension extension
add custom corner radius each side
createElement() → StatefulElement: Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<KeepTallest>: Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>: Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void: Add additional properties associated with the node.
inherited
expand({int flex = 1}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add Expanded to parent widget
fit({BoxFit? fit, AlignmentGeometry? alignment}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add FittedBox to parent widget
flexible({int flex = 1, FlexFit? fit}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add Flexible to parent widget
launch<T>(BuildContext context, {bool isNewTask = false, PageRouteAnimation? pageRouteAnimation, Duration? duration, String? routeName, Object? routeArguments}) → Future<T?>: Available on Widget?, provided by the WidgetExtension extension
Launch a new screen
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
onTap(Function? function, {BorderRadius? borderRadius, Color? splashColor, Color? hoverColor, Color? highlightColor, Color? focusColor, WidgetStateProperty<Color?>? overlayColor}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add tap to parent widget
opacity({required double opacity, int durationInSecond = 1, Duration? duration}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add opacity to parent widget
paddingAll(double padding) → Padding: Available on Widget?, provided by the WidgetExtension extension
return padding all
paddingBottom(double bottom) → Padding: Available on Widget?, provided by the WidgetExtension extension
return padding bottom
paddingDirectional({double start = 0.0, double top = 0.0, double end = 0.0, double bottom = 0.0}) → Widget: Available on Widget?, provided by the WidgetExtension extension
paddingLeft(double left) → Padding: Available on Widget?, provided by the WidgetExtension extension
return padding left
paddingOnly({double top = 0.0, double left = 0.0, double bottom = 0.0, double right = 0.0}) → Padding: Available on Widget?, provided by the WidgetExtension extension
return custom padding from each side
paddingRight(double right) → Padding: Available on Widget?, provided by the WidgetExtension extension
return padding right
paddingSymmetric({double vertical = 0.0, double horizontal = 0.0}) → Padding: Available on Widget?, provided by the WidgetExtension extension
return padding symmetric
paddingTop(double top) → Padding: Available on Widget?, provided by the WidgetExtension extension
return padding top
rotate({required double angle, bool transformHitTests = true, Offset? origin}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add rotation to parent widget
scale({required double scale, Offset? origin, AlignmentGeometry? alignment, bool transformHitTests = true}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add scaling to parent widget
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode: Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
tooltip({required String msg}) → Widget: Available on Widget?, provided by the WidgetExtension extension
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String: A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String: Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String: Returns a one-line detailed description of the object.
inherited
toStringShort() → String: A short, textual description of this widget.
inherited
translate({required Offset offset, bool transformHitTests = true, Key? key}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add translate to parent widget
validate({Widget value = const SizedBox()}) → Widget: Available on Widget?, provided by the WidgetExtension extension
Validate given widget is not null and returns given value if null.
visible(bool visible, {Widget? defaultWidget}) → Widget: Available on Widget?, provided by the WidgetExtension extension
set visibility
withHeight(double height) → SizedBox: Available on Widget?, provided by the WidgetExtension extension
With custom height
withRoundedCorners({Color backgroundColor = whiteColor, BorderRadius borderRadius = const BorderRadius.all(Radius.circular(8.0)), LinearGradient? gradient, BoxBorder? border, List<BoxShadow>? boxShadow, DecorationImage? decorationImage, BoxShape boxShape = BoxShape.rectangle}) → Container: Available on Widget?, provided by the WidgetExtension extension
withScroll({ScrollPhysics? physics, EdgeInsetsGeometry? padding, Axis scrollDirection = Axis.vertical, ScrollController? controller, DragStartBehavior dragStartBehavior = DragStartBehavior.start, bool? primary, required bool reverse}) → Widget: Available on Widget?, provided by the WidgetExtension extension
withShaderMask(List<Color> colors, {BlendMode blendMode = BlendMode.srcATop}) → Widget: Available on Widget?, provided by the WidgetExtension extension
Wrap with ShaderMask widget
withShaderMaskGradient(Gradient gradient, {BlendMode blendMode = BlendMode.srcATop}) → Widget: Available on Widget?, provided by the WidgetExtension extension
Wrap with ShaderMask widget Gradient
withShadow({Color bgColor = whiteColor, Color shadowColor = Colors.black12, dynamic blurRadius = 10.0, dynamic spreadRadius = 0.0, Offset offset = const Offset(0.0, 0.0), LinearGradient? gradient, BoxBorder? border, DecorationImage? decorationImage, BoxShape boxShape = BoxShape.rectangle}) → Container: Available on Widget?, provided by the WidgetExtension extension
withSize({double width = 0.0, double height = 0.0}) → SizedBox: Available on Widget?, provided by the WidgetExtension extension
With custom height and width
withTooltip({required String msg}) → Widget: Available on Widget?, provided by the WidgetExtension extension
Validate given widget is not null and returns given value if null.
withVisibility(bool visible, {Widget? replacement, bool maintainAnimation = false, bool maintainState = false, bool maintainSize = false, bool maintainSemantics = false, bool maintainInteractivity = false}) → Visibility: Available on Widget?, provided by the WidgetExtension extension
set widget visibility
withWidth(double width) → SizedBox: Available on Widget?, provided by the WidgetExtension extension
With custom width

Operators

operator ==(Object other) → bool: The equality operator.
inherited

Static Properties

ifDebugPrint ↔ bool: Set to true to enable debug printing of height changes and shrink decisions.
getter/setter pair