Scribd Logo
Upload

Welcome to Scribd!

  • Flutter Web Declarative Bootstrap (PUBLICLY SHARED) 3

    Uploaded by

    Jehu Shalom
    9 views1 page
    The document proposes using Custom Elements from the Web Components API to initialize Flutter web apps through declarative markup. Custom Elements allow defining new HTML tags that can contain markup and expose custom methods. This approach would allow initializing Flutter apps by nesting <flutter-app> and <flutter-view> elements within HTML, rather than using imperative script tags. A proof-of-concept demonstrates configuring a custom element via attributes and triggering a parent element's method on click.

    Original Description:

    Original Title

    Flutter Web Declarative Bootstrap (PUBLICLY SHARED)3

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document proposes using Custom Elements from the Web Components API to initialize Flutter web apps through declarative markup. Custom Elements allow defining new HTML tags that can contain markup and expose custom methods. This approach would allow initializing Flutter apps by nesting <flutter-app> and <flutter-view> elements within HTML, rather than using imperative script tags. A proof-of-concept demonstrates configuring a custom element via attributes and triggering a parent element's method on click.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    9 views1 page

    Flutter Web Declarative Bootstrap (PUBLICLY SHARED) 3

    Uploaded by

    Jehu Shalom
    The document proposes using Custom Elements from the Web Components API to initialize Flutter web apps through declarative markup. Custom Elements allow defining new HTML tags that can contain markup and expose custom methods. This approach would allow initializing Flutter apps by nesting <flutter-app> and <flutter-view> elements within HTML, rather than using imperative script tags. A proof-of-concept demonstrates configuring a custom element via attributes and triggering a parent element's method on click.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 1

    PUBLICLY SHARED

    Current approach (Imperative) Proposed approach (Declarative)

    Unset Unset
    <html> <html>
    <head> <head>
    <script src="flutter.js" defer></script> <script src="flutter.js" defer></script>
    </head> </head>
    <body> <body>
    <!-- website markup --> <flutter-app option="value">
    <div id="view_1"></div> <!-- website markup -->
    <!-- website markup --> <flutter-view id="view_1"></flutter-view>
    <script> <!-- website markup -->
    window.addEventListener("load", </flutter-app>
    function(_) { </body>
    _flutter.loader.loadEntrypoint({ </html>
    option: 'value',
    });
    });
    </script>
    </body>
    </html>

    The proposed approach leverages Custom Elements, which are a part of the Web
    Components API.

    Custom Elements PoC


    Custom Elements can be used to program new HTML tags, by extending the
    existing ones. Custom Elements integrate well with the DOM, and can be used as
    any other tag, except programmers can control their lifecycle, behavior and DOM/JS
    interface, in a "reactive" manner.

    In a nutshell: one can define a <custom-app> element that can contain any markup
    (like <div>s do), but which exposes a special setColor method that can be called
    on an instance of the custom element obtained with querySelector (or any other
    DOM selection method).

    Here's a PoC that does just that:

    ● https://jsfiddle.net/ditman/wzqban5u

    It demonstrates how a custom-view element can be configured via DOM attributes,


    and how clicking on it can trigger a method call in its parent custom-app.

    In addition to allowing Flutter Web to provide an easy to use initialization for a


    Flutter app, it's also remarkable that custom element markup can be used in any
    page before they're even registered. The browser will render unknown elements

    PUBLICLY SHARED

    You might also like