Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Final snippets for "How to use JavaScript libraries in your Dart applications" article
// web/console.dart
library console;
import 'package:js/js.dart';
external void log(dynamic str);
<!-- web/index.html -->
<!DOCTYPE html>
<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="">
<link rel="icon" href="favicon.ico">
<!-- JS dependency pulled here -->
<script defer src=""></script>
<script defer src="main.dart.js"></script>
<div id="output"></div>
// web/jquery.dart
library jquery;
import 'package:js/js.dart';
class jQuery {
external factory jQuery(String selector);
external int get length;
external jQuery css(CssOptions options);
external jQuery animate(AnimateOptions options);
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;
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!');
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
sdk: '>=2.0.0-dev.68.0 <3.0.0'
js: ^0.6.0
build_runner: ^0.9.0
build_web_compilers: ^0.4.0
Copy link

graphicbeacon commented Jun 18, 2020

Please post your question here

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