CINXE.COM
allowInterop function - dart:js_util library - Dart API
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no"> <meta name="description" content="API docs for the allowInterop function from the dart:js_util library, for the Dart programming language."> <title>allowInterop function - dart:js_util library - Dart API</title> <link rel="canonical" href="https://api.dart.dev/dart-js_util/allowInterop.html"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" rel="stylesheet"> <link rel="stylesheet" href="../static-assets/github.css?v1"> <link rel="stylesheet" href="../static-assets/styles.css?v1"> <link rel="icon" href="../static-assets/favicon.png?v1"> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-VVQ8908SJ5"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-VVQ8908SJ5'); </script> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preload" href="https://fonts.googleapis.com/css2?family=Google+Sans+Text:wght@400&family=Google+Sans:wght@500&display=swap" as="style"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans+Text:wght@400&family=Google+Sans:wght@500&display=swap"> <link rel="stylesheet" href="https://www.gstatic.com/glue/cookienotificationbar/cookienotificationbar.min.css"> </head> <body data-base-href="../" data-using-base-href="false" class="light-theme"> <div id="overlay-under-drawer"></div> <header id="title"> <span id="sidenav-left-toggle" class="material-symbols-outlined" role="button" tabindex="0">menu</span> <ol class="breadcrumbs gt-separated dark hidden-xs"> <li><a href="../index.html">Dart</a></li> <li><a href="../dart-js_util/dart-js_util-library.html">dart:js_util</a></li> <li class="self-crumb">allowInterop<<wbr><span class="type-parameter">F extends Function</span>> function</li> </ol> <div class="self-name">allowInterop</div> <form class="search navbar-right" role="search"> <input type="text" id="search-box" autocomplete="off" disabled class="form-control typeahead" placeholder="Loading search..."> </form> <div class="toggle" id="theme-button" title="Toggle brightness"> <label for="theme"> <input type="checkbox" id="theme" value="light-theme"> <span id="dark-theme-button" class="material-symbols-outlined"> dark_mode </span> <span id="light-theme-button" class="material-symbols-outlined"> light_mode </span> </label> </div> </header> <main> <div id="dartdoc-main-content" class="main-content" data-above-sidebar="dart-js_util/dart-js_util-library-sidebar.html" data-below-sidebar=""> <div> <div id="external-links" class="btn-group"><a title="View source code" class="source-link" href="https://github.com/dart-lang/sdk/blob/88c9758ef131d430d8ce595c6bfb4c90574d3ddd/sdk/lib/js_util/js_util.dart#L277"><span class="material-symbols-outlined">description</span></a></div> <h1><span class="kind-function">allowInterop<<wbr><span class="type-parameter">F extends Function</span>></span> function </h1></div> <section class="multi-line-signature"> <span class="returntype">F</span> <span class="name ">allowInterop</span><<wbr><span class="type-parameter">F extends Function</span>>(<wbr><ol class="parameter-list single-line"> <li><span class="parameter" id="allowInterop-param-f"><span class="type-annotation">F</span> <span class="parameter-name">f</span></span></li> </ol>) </section> <section class="desc markdown"> <p>Returns a wrapper around function <code>f</code> that can be called from JavaScript using <code>package:js</code> JavaScript interop.</p> <p>The calling conventions in Dart web backends differ from JavaScript and so, by default, it is not possible to call a Dart function directly. Wrapping with <code>allowInterop</code> creates a function that can be called from JavaScript or Dart. The semantics of the wrapped function are still more strict than JavaScript, and the function will throw if called with too many or too few arguments.</p> <p>Calling this method repeatedly on a function will return the same result.</p> </section> <section class="summary source-code" id="source"> <h2><span>Implementation</span></h2> <pre class="language-dart"><code class="language-dart">external F allowInterop<F extends Function>(F f);</code></pre> </section> </div> <!-- /.main-content --> <div id="dartdoc-sidebar-left" class="sidebar sidebar-offcanvas-left"> <!-- The search input and breadcrumbs below are only responsively visible at low resolutions. --> <header id="header-search-sidebar" class="hidden-l"> <form class="search-sidebar" role="search"> <input type="text" id="search-sidebar" autocomplete="off" disabled class="form-control typeahead" placeholder="Loading search..."> </form> </header> <ol class="breadcrumbs gt-separated dark hidden-l" id="sidebar-nav"> <li><a href="../index.html">Dart</a></li> <li><a href="../dart-js_util/dart-js_util-library.html">dart:js_util</a></li> <li class="self-crumb">allowInterop<<wbr><span class="type-parameter">F extends Function</span>> function</li> </ol> <h5>dart:js_util library</h5> <div id="dartdoc-sidebar-left-content"></div> </div><!--/.sidebar-offcanvas-left--> <div id="dartdoc-sidebar-right" class="sidebar sidebar-offcanvas-right"> </div><!--/.sidebar-offcanvas--> </main> <footer> <span class="no-break"> Dart 3.5.4 </span> <span class="glue-footer"> <span class="no-break"> | <a href="https://dart.dev/terms" title="Terms of use">Terms</a> </span> <span class="no-break"> | <a href="https://policies.google.com/privacy" target="_blank" rel="noopener" title="Privacy policy" class="no-automatic-external">Privacy</a> </span> <span class="no-break"> | <a href="https://dart.dev/security" title="Security philosophy and practices">Security</a> </span> <div class="copyright" style="font-size: 0.9em; color: darkgrey; margin-top: 0.5em;"> Except as otherwise noted, this site is licensed under a <a style="color: darkgrey;" href="https://creativecommons.org/licenses/by/4.0/"> Creative Commons Attribution 4.0 International License</a> and code samples are licensed under the <a style="color: darkgrey;" href="https://opensource.org/licenses/BSD-3-Clause" class="no-automatic-external"> 3-Clause BSD License</a> </div> </span> </footer> <script src="../static-assets/highlight.pack.js?v1"></script> <script src="../static-assets/docs.dart.js"></script> <button aria-hidden="true" class="glue-footer__link glue-cookie-notification-bar-control"> Cookies management controls </button> <script src="https://www.gstatic.com/glue/cookienotificationbar/cookienotificationbar.min.js" data-glue-cookie-notification-bar-category="2B"> </script> </body> </html>