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
Copy link
Author

graphicbeacon commented Jun 18, 2020

Please post your question here https://reddit.com/r/dartlang

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment