Dart: dynamic redirection without reload


Please note I’m not interested in a Polymer-, Angular- or route-based solution here. I’m trying to learn “pure” Dart here, and while I’ll likely switch to using one of those frameworks down the road, I need to have a good understanding of the fundamentals first.

In Dart, is it possible to download a whole bunch of HTML “snippets” (see below) all at once (at app startup), and then load them into the browser (either the entire window or just inside a particular <div> element, etc.) dynamically?

For instance, my HTML file might have a <div> element:

    <!-- lots of HTML -->

    <div id="container"></div>

    <!-- more HTML -->

And I would like to download two “snippets” (DOM subtrees, HTML templates) of HTML, and dynamically load either one of them into the container div tag. Perhaps one of the snippets looks like this:

<h1>I'm Snippet #1!!!</h1>
<input type="button" name="redPillButton" value="Red Pill!" />

And another snippet my look like:

<h1>I'm Snippet #2!!!</h1>
<input type="button" name="bluePillButton" value="Blue Pill!" />

Can the two snippets be inside their own HTML file, or do I have to put them inside one big file and extract out the “snippet” that I want to load? Either way, how do I accomplish this in a Dart web app?


You can keep each parts in their own file and load them like that :

HttpRequest.getString("part.html").then((html) {
  querySelector('#container').innerHtml = html;

Answered By – Alexandre Ardhuin

Answer Checked By – Marilyn (FlutterFixes Volunteer)

Leave a Reply

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