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

example/example.dart

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

  bootstrap(AppComponent);
}

@Component(
    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) {}

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

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

    _libLogger.fine(activeBreakpoints);
  }

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

    _libLogger.fine(activeBreakpoints);
  }
}

Use this package as a library

1. Depend on it

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

dependencies:
  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';
  

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.

Issues and suggestions

Dependencies