DEV Community

Discussion on: Build a chat application in Dart 2 (Part 2)

Collapse
 
vinceramces profile image
Vince Ramces Oliveros
  @override
  void prepare() {
  _contents.innerHtml = '''
    <div id="ChatRoom">
        <h1 class="title">Chatroom</h1>
        <div class="tile is-ancestor">
          <div class="tile is-8 is-vertical is-parent">
            <div class="tile is-child box">
              <div id="ChatRoomLog"></div>
            </div>
            <div class="tile is-child">
              <div class="field has-addons">
                <div class="control is-expanded has-icons-left">
                  <input id="ChatRoomMessageInput" class="input is-medium" type="text" placeholder="Enter message" />
                  <span class="icon is-medium is-left">
                    <i class="fas fa-keyboard"></i>
                  </span>
                </div>
                <div class="control">
                  <button id="ChatRoomSendBtn" class="button is-medium is-primary">
                    Send&nbsp;&nbsp;
                    <span class="icon is-medium">
                      <i class="fas fa-paper-plane"></i>
                    </span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      ''';

This was harder for me to read the tags.
although this was the same as document.innerHTML in Javascript, it was still painful to read. are there any alternative solution of not storing the multi-line string html tags?

Collapse
 
creativ_bracket profile image
Jermaine • Edited

Hey Vince,

Thanks for the feedback.

Off the top of my head you could try putting the string in a separate html file and lazy-loading it in.

Alternatively, you could move this back to web/index.html like it was in Part 1 and toggle its visibility 👎🏾. Perhaps even better you could try moving it to web/index.html in a <template> tag and have logic to extract and render the contents whenever you need. EDIT: There is a TemplateElement class to help with that.

Hope that helps.