Search packages, repositories and app categories

Package detailsv0.5.0

value_layout_builder

A LayoutBuilder with an extra value. It's useful when you want to build a widget with a value computed during layout.

AndroidiOSWebmacOSWindowsLinux
30-day downloads
326K
Likes
20
Pub points
150

Install package

flutter pub add value_layout_builder

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A LayoutBuilder extension that provides an additional value during the layout process. It enables widgets to react dynamically to layout constraints while also accessing a computed value derived from those constraints. This is particularly useful for responsive designs where both size and custom logic need to be considered simultaneously. The package enhances flexibility by combining layout awareness with stateful computation, making it ideal for complex UI components that depend on both dimensions and calculated data.

Use cases

  • Responsive layouts with computed values
  • Dynamic widget sizing based on constraints
  • Complex UI components requiring layout-aware logic
  • Custom animations tied to layout changes
  • Building reusable layout widgets with internal logic

Key features

  • Extends LayoutBuilder with extra value
  • Supports dynamic value computation during layout
  • Enables responsive design with context-aware logic
  • Minimal boilerplate
  • Works across all Flutter platforms

Suitable for

  • Developers building adaptive UIs
  • UI component creators needing layout context
  • Projects requiring responsive and dynamic layouts
  • Teams using functional or declarative UI patterns

Considerations

  • Requires understanding of Flutter's layout phase
  • May add complexity for simple layouts
  • Not suitable for static or non-responsive designs
  • Performance impact if value computation is heavy
  • Limited to use within layout-building contexts

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

value_layout_builder

Pub

A LayoutBuilder with an extra value. It's useful when you want to build a widget with a value computed during layout.

Features

  • ValueLayoutBuilder - The RenderBox version.
  • SliverValueLayoutBuilder - The RenderSliver version.

Getting started

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  value_layout_builder:

In your library add the following import:

import 'package:value_layout_builder/value_layout_builder.dart';

For help getting started with Flutter, view the online documentation.

Usage

ValueLayoutBuilder and SliverValueLayoutBuilder will pair with a custom RenderObject which accepts a one of them as a child.

For example it is used in flutter_sticky_header in order to know how much the header is hidden.

The typical usage is to expose a builder in the parameter of your widget's constructor which takes a BuildContext and the value you want to get from layout, and to pass it from your custom RenderObject.

The following code is a dumb example to show you how to use it:

class _Tester<T> extends SingleChildRenderObjectWidget {
  const _Tester({
    Key? key,
    required this.value,
    required Widget child,
  }) : super(key: key, child: child);

  final T value;

  @override
  _RenderTester<T> createRenderObject(BuildContext context) {
    return _RenderTester<T>(value: value);
  }

  @override
  void updateRenderObject(
    BuildContext context,
    _RenderTester<T> renderObject,
  ) {
    renderObject.value = value;
  }
}

class _RenderTester<T> extends RenderBox
    with RenderObjectWithChildMixin<RenderBox> {
  _RenderTester({
    required T value,
  }) : _value = value;

  T get value => _value;
  T _value;
  set value(T value) {
    if (_value != value) {
      _value = value;
      markNeedsLayout();
    }
  }

  @override
  void performLayout() {
    // We create a specific constraints with the value we want to pass to the builder.
    BoxValueConstraints<T> constraints = BoxValueConstraints<T>(
      constraints: this.constraints,
      value: value,
    );
    child.layout(constraints);
    size = constraints.biggest;
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    context.paintChild(child, offset);
  }
}

We can then use _Tester<T> like this:

_Tester<String>(
  value: 'test',
  child: ValueLayoutBuilder<String>(
    builder: (context, constraints) {
      // The constraints holds the String value.
      final String value = constraints.value;
      return Text(value);
    },
  ),
)

Sponsoring

I'm working on my packages on my free-time, but I don't have as much time as I would. If this package or any other package I created is helping you, please consider to sponsor me. By doing so, I will prioritize your issues or your pull-requests before the others.

Changelog

Please see the Changelog page to know what's recently changed.

Contributions

Feel free to contribute to this project.

If you find a bug or want a feature, but don't know how to fix/implement it, please fill an issue.
If you fixed a bug or implemented a feature, please send a pull request.

Categories

Source repository

Projects using this package