resize_observer 1.0.1

  • README.md
  • CHANGELOG
  • Example
  • Installing
  • Versions
  • 75

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.

API

// bool if the browser supports the Resize Observer API
ResizeObserver.supported

// 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

example/main.dart

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 =
      ro.ResizeObserver.supported.toString();

  document.getElementById('observeBtn').onClick.listen((_) {
    ro.ResizeObserver.observe(textarea, _onResize);
    observing = true;
    obsEl.innerHtml = observing.toString();
  });
  document.getElementById('unobserveBtn').onClick.listen((_) {
    ro.ResizeObserver.unobserve(textarea);
    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:


dependencies:
  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';
  
Version Uploaded Documentation Archive
1.0.1 Jul 26, 2018 Go to the documentation of resize_observer 1.0.1 Download resize_observer 1.0.1 archive
1.0.0 Aug 8, 2017 Go to the documentation of resize_observer 1.0.0 Download resize_observer 1.0.0 archive
Popularity:
Describes how popular the package is relative to other packages. [more]
49
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
75
Learn more about scoring.

We analyzed this package on Dec 5, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.1.0
  • pana: 0.12.7

Platforms

Detected platforms: web

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

Dependencies

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