What are the tags, <flt-*> generated by Flutter for Web?

user_3011308 0
Viewed 3393

I ran Flutter for Web by running flutter run -d chrome, then I see bunch of <flt-*> tags such as <flt-glass-pane>, <flt-scene>. I think Flutter Web renders web pages by Canvas and not sure why it generates those html tags. Are they for SEO purposes? Tried to look up documentation but could not find any about it.

I removed style attributes from the generates html tags on the default startup page and it looks like below.

<flt-glass-pane>
  <flt-semantics-placeholder role="button" aria-live="true" tabindex="0" aria-label="Enable accessibility"></flt-semantics-placeholder>
  <flt-scene-host aria-hidden="true">
    <flt-scene flt-layer-state="updated">
      <flt-transform flt-layer-state="updated">
        <flt-offset flt-layer-state="updated">
          <flt-picture flt-layer-state="updated"></flt-picture>
          <flt-offset flt-layer-state="updated">
            <flt-clip flt-layer-state="updated" clip-type="physical-shape">
              <flt-clip-interior>
                <flt-picture flt-layer-state="updated">
                  <flt-dom-canvas>
                    <p>You have pushed the button this many times:</p>
                    <p>0</p>
                  </flt-dom-canvas>
                </flt-picture>
                <flt-clip flt-layer-state="updated" clip-type="physical-shape" >
                  <flt-clip-interior >
                    <flt-picture flt-layer-state="updated" >
                      <flt-canvas >
                        <div >
                          <div >
                            <p >Flutter Demo Home Page</p>
                          </div>
                        </div>
                      </flt-canvas>
                    </flt-picture>
                  </flt-clip-interior>
                </flt-clip>
                <flt-transform flt-layer-state="updated" >
                  <flt-clip flt-layer-state="updated" clip-type="physical-shape" >
                    <flt-clip-interior >
                      <flt-picture flt-layer-state="updated" >
                        <flt-dom-canvas >
                          <p ></p>
                        </flt-dom-canvas>
                      </flt-picture>
                    </flt-clip-interior>
                  </flt-clip>
                </flt-transform>
              </flt-clip-interior>
            </flt-clip>
          </flt-offset>
        </flt-offset>
        <flt-picture flt-layer-state="updated" >
          <flt-dom-canvas >
            <draw-rect flt-rect="Rect.fromLTRB(-40.0, 28.0, 40.0, 40.0)" flt-paint="SurfacePaintData(color = rgba(0,0,0,0.4980392156862745); maskFilter = MaskFilter.blur(BlurStyle.normal, 4.0); isAntiAlias = true)" ></draw-rect>
            <draw-rect flt-rect="Rect.fromLTRB(-40.0, 28.0, 40.0, 40.0)" flt-paint="SurfacePaintData(color = rgba(183,28,28,0.6274509803921569); isAntiAlias = true)" ></draw-rect>
            <p >DEBUG</p>
          </flt-dom-canvas>
        </flt-picture>
      </flt-transform>
    </flt-scene>
  </flt-scene-host>
</flt-glass-pane>
<flt-ruler-host >
  <div data-ruler="single-line" >
    <p >_</p>
    <div></div>
  </div>
  <div data-ruler="min-intrinsic" >
    <p >_</p>
  </div>
  <div data-ruler="constrained" >
    <p >_</p>
  </div>
  <div data-ruler="single-line" >
    <p >Flutter Demo Home Page</p>
    <div></div>
  </div>
  <div data-ruler="min-intrinsic" >
    <p >Flutter Demo Home Page</p>
  </div>
  <div data-ruler="constrained" >
    <p >Flutter Demo Home Page</p>
  </div>
  <div data-ruler="single-line" >
    <p >You have pushed the button this many times:</p>
    <div></div>
  </div>
  <div data-ruler="min-intrinsic" >
    <p >You have pushed the button this many times:</p>
  </div>
  <div data-ruler="constrained" >
    <p >You have pushed the button this many times:</p>
  </div>
  <div data-ruler="single-line" >
    <p >0</p>
    <div></div>
  </div>
  <div data-ruler="min-intrinsic" >
    <p >0</p>
  </div>
  <div data-ruler="constrained" >
    <p >0</p>
  </div>
  <div data-ruler="single-line" >
    <p ></p>
    <div></div>
  </div>
  <div data-ruler="min-intrinsic" >
    <p ></p>
  </div>
  <div data-ruler="constrained" >
    <p ></p>
  </div>
  <div data-ruler="single-line" >
    <p >DEBUG</p>
    <div></div>
  </div>
  <div data-ruler="min-intrinsic" >
    <p >DEBUG</p>
  </div>
  <div data-ruler="constrained" >
    <p >DEBUG</p>
  </div>
</flt-ruler-host>
flutter-web flutter-layout flutter
1 Answers

Flutter has two types of web renderers. The code snippet you attached looks like using html renderer not the canvaskit. So, you are getting DOM elements instead of canvas. When you run flutter run -d chrome it builds in auto mode that choose the renderer automatically here it choose html renderer.

The renderer to be used can be enforced by the --web-renderer option (html or canvaskit) in flutter run or flutter build command.

Now if we look at the DOM elements, some of the DOM elements are common for both renderers.

The pattern looks like the below

<flt-glass-pane>
    <flt-semantics-placeholder></flt-semantics-placeholder>
    <flt-scene-host>
        <flt-scene>

           <!-- if canvaskit renderer used here will be one canvas element only 
                and all elements or widgets will be drawn inside 
                the canvas -->

           <!-- if html renderer used here will be DOM elements with 
                different tags and attribute to render the 
                widgets in the browser -->

        </flt-scene>
    </flt-scene-host>
<flt-glass-pane>

For html renderer the DOM elements with different tags and attributes inside flt-scene are used to render the widgets in browser.

Apart from the container DOM elements (flt-glass-pane, flt-scene-host, flt-scene), the flt-semantics-placeholder element is interesting. If javascript click() is triggered on the flt-semantics-placeholder element it enables accessibility. Technically it creates an overlay of dom elements over the canvas mapped to the widget coordinates, so that the widgets in flutter app can be used by accessibility tools, search engines, and other semantic analysis software to determine the meaning of the application though they are rendered in a canvas as, in canvas we can not know the co-ordinates or read text of the widgets easily (using OCR it is possible but that is different). This is used in flutter driver also here.

user_85717680
Related