Dart WebUI html data values

Issue

I am having some issues with dart’s web ui package.

First of all, i see that web ui is not interpreting html tags.
Is it not possible to use, for example <br /> tags, to inject html code inside div or span elements in html?

EDIT:

I have this in my html doc:

<span>{{dataValue}}</span>

This in my dart file:

String dataValue = "This is an example <br /> using line breaks";

By “inject” in ment putting dataValue string inside its placeholder({{dataValue}}) in html document.
My question is can i somehow interpret this string as html? Now it is displaying <br /> tags as regular text, and not interpreting it as a html linebreak.

Solution

This is working as intended. It would be a security problem if arbitrary HTML code could be injected as a string in this way.

You can, however, add a line break to your string with \n, which will be visible on your page.

Or you can use the Dart HTML libraries to add elements where you want them.

For example:

<span id="mySpan"></span>
import 'dart:html';

var span = query('#mySpan');
span.append(new Text('first half of my text'));
span.append(new BrElement());
span.append(new Text('second half of my text'));

Answered By – Juniper Belmont

Answer Checked By – Pedro (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.