jb_responsive_breakpoints 5.0.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 2

jb_responsive_breakpoints #

An Angular Dart Service to register a listener function to media query updates without dealing with matchMedia.

Notice: Package renamed #

The Version 5.0 will be the latest version with the package name jb_responsive_breakpoints. The new package name is jb_media_query_service.

How to use #

Declare JbMediaQueryService as provider, inject it into your component (called mqService in example) and call
mqService.register(callbackFunction, minWidth: 300)
mqService.registerStringQuery(callbackFunction, '(minWidth:600px)'.

The register method provides a shortcut for the most used media queries, currently min-width and min-height media queries. If both are given, they will be connected by and. The registerStringQuery method allows you to register an arbitrary mediaQuery which is accepted by window.matchMedia.

Example #

Please look at the example folder in the Github Repository.

Build 'System' #

The build system consists of a script system with the 'scripts' package for dart. This works analoguous to the npm scripts feature.

Activate Scripts #

pub global activate scripts

Basic Scripts Commands #

  • scripts get
  • scripts install
  • scripts clean
  • scripts

Custom Scripts Commands #

  • check-pkg - checks package health for pub.dartlang.org with the pana package
  • format-src - format sources with dartfmt

Changelog #

5.0.0 #

  • moved content from./web to ./example
  • changed architecture to be a more simple media query service instead of a big component with unnecessary complicated bindings
  • adjusted example to fit new JbMediaQueryService

4.0.2 #

  • added two dev dependencies back to normal dependencies because of transformer

4.0.1 #

  • moves some dependencies to dev_dependencies

4.0.0 #

  • updates to angular 4.0.0
  • introduces strong mode & checked dart2js (dartdevc not compatible with angular currently)

2.0.5 #

  • updated dependencies, mainly angular2 to 2.2.0
  • removed test folder and entry_point from test folder in angular transformer in pubspec.yaml

2.0.4 #

  • upgraded dependencies again - angular2 Beta 20
  • added consumer component example to test injecting activeBreakpoints inside components
  • changed onBreakpointChange EventEmitter to emit new list references on every breakpoint change

2.0.3 #

-downgraded dependencies - angular2 Beta 17

2.0.2 #

  • updated dependencies - angular2 Beta 19

2.0.1 #

  • emits now change events instead of refreshing the whole component tree on media queries

2.0.0 #

  • updated syntax to Angular 2

1.0.1 #

  • changed internals to use window.matchMedia
  • problem with TwoWayBinding in AngularDart likely broken in version 1.16 of the dart sdk, maybe caused by some code generation issues

0.0.1 #

  • Initial version


library jb_responsive_breakpoints.app_init;

import 'package:angular/angular.dart';
import 'package:logging/logging.dart';
import 'package:logging_handlers/logging_handlers_shared.dart';
import 'package:jb_responsive_breakpoints/jb_responsive_breakpoints.dart';

final Logger _libLogger = new Logger("jb_responsive_breakpoints");

void main() {
  //init logging
  hierarchicalLoggingEnabled = true;
  Logger.root.onRecord.listen(new LogPrintHandler());

  Logger.root.level = Level.OFF;
  _libLogger.level = Level.ALL;
  //could be customized with _libLogger.level =  Level.INFO or Level.OFF and
  // then add specific logger
  //_logger.level = Level.All


    selector: 'app-root',
    templateUrl: 'app_component.html',
    directives: const [CORE_DIRECTIVES],
    providers: const [JbMediaQueryService])
class AppComponent implements OnInit {
  JbMediaQueryService mqService;

  Map<String, String> colors = {
    'default': '#aaaaaa',
    'min300': '#aaaa00',
    'min600': '#00aaaa',

  String color = "#aaaaaa";

  List<String> activeBreakpoints = [];

  AppComponent(this.mqService) {}

  ngOnInit() {
    mqService.register(min300, minWidth: 300);
    mqService.registerStringQuery(min600, '(min-width: 600px)');

  min300(bool matches) {
    if (matches) {
      color = colors['min300'];
    } else {
      color = colors['default'];


  min600(bool matches) {
    if (matches) {
      color = colors['min600'];
    } else {
      color = colors['min300'];


Use this package as a library

1. Depend on it

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

  jb_responsive_breakpoints: ^5.0.0

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:jb_responsive_breakpoints/jb_responsive_breakpoints.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.

The package version is not analyzed, because it does not support Dart 2. Until this is resolved, the package will receive a health and maintenance score of 0.

Analysis issues and suggestions

Support Dart 2 in pubspec.yaml.

The SDK constraint in pubspec.yaml doesn't allow the Dart 2.0.0 release. For information about upgrading it to be Dart 2 compatible, please see https://dart.dev/dart-2#migration.

Maintenance issues and suggestions

Make sure dartdoc successfully runs on your package's source files. (-10 points)

Dependencies were not resolved.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.24.0 <2.0.0