Skip to content

Instantly share code, notes, and snippets.

@graphicbeacon

graphicbeacon/console.dart

Last active October 27, 2023 21:16
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save graphicbeacon/0a23381809fcddaffd553c9ad845b96f to your computer and use it in GitHub Desktop.
Save graphicbeacon/0a23381809fcddaffd553c9ad845b96f to your computer and use it in GitHub Desktop.
Download ZIP
Final snippets for "How to use JavaScript libraries in your Dart applications" article
Raw
console.dart
// web/console.dart
@JS('console')
library console;
import 'package:js/js.dart';
external void log(dynamic str);
Raw
index.html
<!-- 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>
Raw
jquery.dart
// 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;
}
Raw
main.dart
// 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));
}
Raw
pubspec.yaml
# ./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

Read the full article here.

@heinzan
Copy link

heinzan commented Jun 18, 2020

Hi.I have local js file just encode and decode function how use that functions from flutter.
Eg. function encrypt(plaintext, password) {
var v = new Array(2), k = new Array(4), s = "", i;

  plaintext = escape(plaintext);  // use escape() so only have single-byte chars to encode

  // build key directly from 1st 16 chars of password
  for (var i=0; i<4; i++) k[i] = Str4ToLong(password.slice(i*4,(i+1)*4));

  for (i=0; i<plaintext.length; i+=8) {  // encode plaintext into s in 64-bit (8 char) blocks
    v[0] = Str4ToLong(plaintext.slice(i,i+4));  // ... note this is 'electronic codebook' mode
    v[1] = Str4ToLong(plaintext.slice(i+4,i+8));
    code(v, k);
    s += LongToStr4(v[0]) + LongToStr4(v[1]);
  }

  return escCtrlCh(s);
  // note: if plaintext or password are passed as string objects, rather than strings, this
  // function will throw an 'Object doesn't support this property or method' error
}

this is a function.I can use in android with using rhino library and how use in dart.Please point me.bro thanks

@graphicbeacon
Copy link
Author

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