Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Final snippets for "How to use JavaScript libraries in your Dart applications" article
// web/console.dart
@JS('console')
library console;
import 'package:js/js.dart';
external void log(dynamic str);
<!-- web/index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="scaffolded-by" content="https://github.com/google/stagehand">
<title>js_interop_test</title>
<link rel="icon" href="favicon.ico">
<!-- JS dependency pulled here -->
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script defer src="main.dart.js"></script>
</head>
<body>
<div id="output"></div>
</body>
</html>
// web/jquery.dart
@JS()
library jquery;
import 'package:js/js.dart';
@JS()
class jQuery {
external factory jQuery(String selector);
external int get length;
external jQuery css(CssOptions options);
external jQuery animate(AnimateOptions options);
}
@JS()
@anonymous
class CssOptions {
external factory CssOptions({backgroundColor, height, position, width});
external dynamic get backgroundColor; // properties based on jQuery api
external dynamic get height;
external dynamic get position;
external dynamic get width;
}
@JS()
@anonymous
class AnimateOptions {
external factory AnimateOptions({left, top});
external dynamic get left; // properties based on jQuery api
external dynamic get top;
}
// web/main.dart
import './console.dart';
import './jquery.dart';
void main() {
log('Hello world!');
jQuery('#output')
.css(CssOptions(
backgroundColor: 'green',
height: 100,
position: 'relative',
width: 100))
.animate(AnimateOptions(left: 100, top: 100));
}
# ./pubspec.yaml
name: dart_js_interop
description: A demonstration on how to use JavaScript libraries a Dart web application
environment:
sdk: '>=2.0.0-dev.68.0 <3.0.0'
dependencies:
js: ^0.6.0
dev_dependencies:
build_runner: ^0.9.0
build_web_compilers: ^0.4.0
@graphicbeacon

This comment has been minimized.

Copy link
Owner Author

commented Aug 23, 2018

Read the full article here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.