An Angular Dart Service to register a listener function to media query updates without dealing with matchMedia.
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
.
Declare JbMediaQueryService
as provider, inject it into your component
(called mqService in example
) and call
mqService.register(callbackFunction, minWidth: 300)
or
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.
Please look at the example
folder in the Github Repository.
The build system consists of a script system with the 'scripts' package for dart.
This works analoguous to the npm scripts feature.
https://pub.dartlang.org/packages/scripts#-readme-tab-
pub global activate scripts
-downgraded dependencies - angular2 Beta 17
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);
}
}
Add this to your package's pubspec.yaml file:
dependencies:
jb_responsive_breakpoints: ^5.0.0
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.
Now in your Dart code, you can use:
import 'package:jb_responsive_breakpoints/jb_responsive_breakpoints.dart';
Version | Uploaded | Documentation | Archive |
---|---|---|---|
5.0.0 | Jan 25, 2018 |
|
|
4.0.3 | Jan 18, 2018 |
|
|
4.0.2 | Jan 17, 2018 |
|
|
4.0.1 | Jan 17, 2018 |
|
|
Popularity:
Describes how popular the package is relative to other packages.
[more]
|
0
|
Health:
Code health derived from static analysis.
[more]
|
--
|
Maintenance:
Reflects how tidy and up-to-date the package is.
[more]
|
--
|
Overall:
Weighted score of the above.
[more]
|
0
|
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.
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://www.dartlang.org/dart-2#migration.
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 |