Pure Dart DOM possibility?


I am learning Dart and suddenly had an epiphany (or possibly, an epiphany):

Can I write a Dart web app where the “view” is done 100% in Dart?

I’m talking: absolutely no (none/zero/nadda) HTML files (.html). 100% Dart code. Something like:

class SigninView {
    LabelElement signinLabel;
    InputElement emailTextField;
    InputElement passwordTextField;
    ButtonElement signinButton;

    // constructors, getters, setters, etc.

    // Perhaps called from inside constructor...
    void initUI() {
        signinLabel = new LabelElement();
        signinLabel.innerHTML = "<span class=\"blah\">Please sign in</span>";

        emailTextField = new InputElement();
        emailTextField.innerHTML = "<input type=\"text\" name=\"fizz\" placeholder=\"Email\"/>";

        // ...etc.

        // htmlFactory would be something I'd need to write myself (?)
        String html = htmlFactory.newHTML(signinLabel, emailTextField, ...);

        querySelector("#someDivTag").innerHTML = html;

In theory (that is, my intentions with the above code), as soon as the SigninView is created, it initializes a bunch of DOM elements and populates someDivTag with them.

  1. Is this possible? If so am I “doing it right”, or is there a different/preferred/standardized approach to this?
  2. Does this introduce any additional/potential caveats (memory leaks), performance or security issues that I should be aware of?
  3. If I were to adopt this strategy throughout my whole app, can I assume the app would be quicker to download (less HTML text), but slower to execute (dynamic DOM element creation)? If so, is there a way to somehow instantiate all the DOM elements my app will need up front (slowing down initial download time), and then only make certain elements visible as I wish to render different views/screens (thus speeding up execution time)?


You need an HTML file with the script tags for the Dart startup.
Anything else can be done in Dart.

Answered By – Günter Zöchbauer

Answer Checked By – David Goodson (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *