resize_observer 1.0.1

  • Readme
  • Changelog
  • Example
  • Installing
  • 49

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

with Flutter:

$ flutter pub get

Alternatively, your editor might support pub get or flutter 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 Apr 8, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6

Health suggestions

Fix lib/resize_observer.dart. (-0.50 points)

Analysis of lib/resize_observer.dart reported 1 hint:

line 20 col 14: Unnecessary new keyword.

Maintenance suggestions

Package is getting outdated. (-70.41 points)

The package was last published 88 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