Is it Possible to Access the Widget Tree that is Rendering the HTML post Render?[QUESTION]

[RileySeaburg]

Is it Possible to Access the Widget Tree that is Rendering the HTML post Render?

I am trying to build a page builder in flutter. I found this package and it works well to render the HTML.

My question is: Is it possible to access the state of the Html after the styles have been added from Flutter.

I can't seem to find where the state is stored.

Any help would be greatly appreciated!

[Sub6Resources]

That depends a bit on what you mean. What sort of things are you looking to do? The tree under the Html widget is just a normal widget tree for the most part.

[Sub6Resources]

Closing for now, as we need more information. If you have more information to give, please comment and we'll gladly reopen and work through this.

Thanks!

[RileySeaburg]

I'm trying to access how the item would look inside the Dom after the styles have been rendered.

For example

/// Declare html data to render 
const htmlData = r"""
      <h1>Header 1</h1>
""";
/// Render HTML
SingleChildScrollView(
              child: Html(
                anchorKey: staticAnchorKey,
                data: htmlData,
                style: {
                  'h1': Style(
                    fontSize: FontSize(30),
                    fontWeight: FontWeight.bold,
                    textAlign: TextAlign.center,
                    color: Color.fromARGB(255, 177, 27, 27),
                  ),
                },
              )
            ),

I would like to access the HTML representation as a DOM element.

I'm curious if this package is implementing a virtual DOM or something similar.

The purpose of this inqury:

I'm trying to build a page builder in flutter. Is it possible to use this package to create HTML elements in flutter and export them?

Think Grapes.js for Flutter.

[erickok]

I don't think you can 'export' a widget tree in Flutter in the sense that you can the code needed to create that tree. Flutter doesn't have a DOM either.

You can technically to something like Html(...).build(context) to get the widget (tree) - perhaps that is useful for you?

[Sub6Resources]

The way this package handles HTML is through the following flow:

Raw HTML String -> dom.Document (from the html package) -> StyledTree (in this package) -> InlineSpan tree (from the Flutter Library), which is then displayed in a RichText widget.

All of this processing happens in HtmlParser.dart within our library. Most of the methods that perform the transformation are public and static, so you could call them yourself in some way. You'll have to be prepared to do a bit of reading though.

[RileySeaburg]

Perfect, I just needed clarity on the state flow.

Thank you.