ResizeSensor top-level property

UiFactory<ResizeSensorProps> ResizeSensor
getter/setter pair

A wrapper component that detects when its parent is resized, providing a ResizeSensorEvent as a callback argument to ResizeSensorProps.onResize.

Intended for use as a https://wicg.github.io/ResizeObserver/ polyfill.

(ResizeSensor()
  ..onResize = (ResizeSensorEvent event) {
    print('''
      Width was ${event.prevWidth}px, and is now ${event.newWidth}px.
      Height was ${event.prevHeight}px, and is now ${event.newHeight}px.
    ''');
  }
)(
  // children that will change width / height
)

If your implementation needs to know what the dimensions of the node were when it first mounted, ResizeSensorProps.onInitialize can be set, as long as ResizeSensorProps.quickMount is false.

(ResizeSensor()
  ..onInitialize = (ResizeSensorEvent event) {
    print('''
      Width was ${event.prevWidth}px when first mounted.
      Height was ${event.prevHeight}px, and is now ${event.newHeight}px.
    ''');
  }
  ..onResize = (ResizeSensorEvent event) {
    print('''
      Width was ${event.prevWidth}px, and is now ${event.newWidth}px.
      Height was ${event.prevHeight}px, and is now ${event.newHeight}px.
    ''');
  }
)(
  // children that will change width / height
)

The component must be put in a relative or absolutely positioned container.

Implementation

UiFactory<ResizeSensorProps> ResizeSensor = castUiFactory(_$ResizeSensor);