resize_observer 1.0.1

  • Readme
  • Changelog
  • Example
  • Installing
  • 46

resize_observer #

A Dart wrapper for the Resize Observer API that uses JS interop. It works under both Dart 1 and 2 but since it now exists in the dart:html package in Dart 2, I would recommend just using the built in one under Dart 2 and this version under Dart 1.


// bool if the browser supports the Resize Observer API

// Start observing an element for resizes
ResizeObserver.observe(Element element, ResizeObserverCallback callback);

// Stop observing resizes to [element]
ResizeObserver.unobserve(Element element);

// Callbacks must match the following signature
typedef void ResizeObserverCallback(Element element, num x, num y, num width, num height, num top, num bottom, num left, num right);

See the example for an example of how to use it.

# 1.0.0 

Initial release for Dart 1

# 1.0.1

Updated for Dart 2 compatibility and pub score improvements


import 'dart:html';
import 'dart:async';

import 'package:resize_observer/resize_observer.dart' as ro;

bool observing = true;

Future<Null> main() async {
  Element textarea = document.getElementById('textarea');
  Element obsEl = document.getElementById('observing');

  ro.ResizeObserver.observe(textarea, _onResize);
  obsEl.innerHtml = observing.toString();

  document.getElementById('supported').innerHtml =

  document.getElementById('observeBtn').onClick.listen((_) {
    ro.ResizeObserver.observe(textarea, _onResize);
    observing = true;
    obsEl.innerHtml = observing.toString();
  document.getElementById('unobserveBtn').onClick.listen((_) {
    observing = false;
    obsEl.innerHtml = observing.toString();

void _onResize(Element el, num x, num y, num width, num height, num top,
    num bottom, num left, num right) {
  el.text =
      'x: $x y: $y width: $width height: $height top: $top left: $left bottom: $bottom right: $right';

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  resize_observer: ^1.0.1

2. Install it

You can install packages from the command line:

with pub:

$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:resize_observer/resize_observer.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Oct 11, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.5.1
  • pana: 0.12.21


Detected platforms: web

Primary library: package:resize_observer/resize_observer.dart with components: html, js.

Maintenance suggestions

Package is getting outdated. (-21.10 points)

The package was last published 63 weeks ago.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.22.1 <3.0.0
Dev dependencies
build_runner >=0.6.0 <1.0.0
build_web_compilers >=0.2.0 <1.0.0