Flutter Web page built with flutter_rust_bridge cannot be translated by browser plugins, shows only flutter-view in DevTools, and text cannot be selected

[Liuzhichao99]

Hi, I am a beginner and I am using flutter_rust_bridge to build my Flutter Web application. I encountered several issues when testing the generated Web page in Chrome:

The page cannot be translated by Google Translate or any browser translation plugin.

When I open Chrome DevTools (F12) and try to inspect UI elements (for example, a Button), I can only see a single top-level element like flutter-view.

I cannot see the real HTML structure of individual widgets.

Text on the page cannot be selected or copied, which also prevents browser translation tools from working.

It seems that the entire page is rendered as a canvas, instead of real HTML DOM nodes, so translation plugins and DOM inspection tools do not work.

My question is:

Is this expected behavior for the latest Flutter Web / flutter_rust_bridge builds?

Is there any way to enable an HTML-based renderer so that the browser can inspect real DOM elements and allow text translation or text selection?

Or is this renderer behavior fixed in the current Flutter versions and cannot be changed?

Any guidance would be greatly appreciated.
Thank you!

[fzyzcjy]

Yes IIRC these are expected behavior of Flutter Web (unrelated to flutter_rust_bridge):

The page cannot be translated by Google Translate or any browser translation plugin.
When I open Chrome DevTools (F12) and try to inspect UI elements (for example, a Button), I can only see a single top-level element like flutter-view.
I cannot see the real HTML structure of individual widgets.
It seems that the entire page is rendered as a canvas, instead of real HTML DOM nodes, so translation plugins and DOM inspection tools do not work.

For this one, iirc someone made some SelectableText or sth like that:

Text on the page cannot be selected or copied, which also prevents browser translation tools from working.

Is there any way to enable an HTML-based renderer so that the browser can inspect real DOM elements and allow text translation or text selection?
Or is this renderer behavior fixed in the current Flutter versions and cannot be changed?

maybe google a bit about flutter + html renderer for its status