🛠️ [TASK] : Research how to make flutter web app searchable

[dtscalac]

Summary

Research how to make flutter web app searchable

Description

Research how to make flutter web app searchable with cmd+F (or ctrl+F) the way it works for traditional web apps

[apskhem]

Report notes by @apskhem

As I navigated through uikit_example and used the text search tool on Chrone (cmd+F), the tool doesn't work for any text appearing on the screen. So I used the inspector tool (F12) to investigate the structure of the Flutter app running on the browser. It resulted that the entire rendering of the app is wrapped inside a shadow dom, which is not possible to search by text by default.

The entire Flutter app canvas wrapped inside a shadow DOM. After closing (hiding) the canvas by the inspector tool, the whole screen went white.

This proved that the Flutter canvas rendering on the web is wrapped inside a shadow dom. Therefore, it's unsearchable by default.

The solution is running or building the app with this flag --web-renderer html, for example, flutter run -d chrome --web-renderer html. So this will force flutter to use the HTML renderer instead of CanvasKit renderer, the default one. There might be some caveats for changing to this option, but it surely make the text searchable. The text remains unselectable (if you want to cover the text and copy). And it seems that searching with white spaces doesn't work. For example, the text on the screen is "UI examples" searching with "UI" will highlight the text, but if I search with "UI ex", the text is not highlighted. Or when scrolled off screen, the text remain unsearchable.

[dtscalac]

@apskhem html renderer is going to be deprecated soon - we must stay with canvaskit.

flutter/flutter#145954

[desmond206x]

Why is this closed without a solution for the canvaskit?

[apskhem]

We’ve come to the conclusion that, for now, there’s no official solution for using canvaskit. So, it's probably best to wrap this up for the time being. As we keep working with Flutter, we might see some updates down the line.

[RafaRuiz]

Cmd+F / Control+F is probably the most common feature used by end customers in a normal journey.
Not sure why there's no importance given to this

[desmond206x]

We’ve come to the conclusion that, for now, there’s no official solution for using canvaskit. So, it's probably best to wrap this up for the time being. As we keep working with Flutter, we might see some updates down the line.

That is no solution for one of the most needed features for flutter web. How should we promote Flutter if something like this doesn't work?

[reza00farjam]

Is there any native way to detect when the browser's search box is enabled by the end user? If yes, what about introducing a new widget that feels and looks exactly like the running browser's search box, and is stacked in place of that when user enables the search?

[dtscalac]

Hey @desmond206x, @RafaRuiz, @reza00farjam.

We are a small application team using Flutter to build a Catalyst Voices, a new generation of voting platform for the Cardano ecosystem. We are not part of the Flutter Team, don't know them and never worked with them.

As all of you - we also regret that such feature wasn't integrated yet into the flutter framework and we're looking forward to it. When it becomes available we will be happy to employ it in the project we're developing.

This issue was reported in our repository to gain knowledge about current development state on Flutter side. We have an use case where it could become handy. We learned that it's not done yet in the framework so we will observe and wait until it becomes available.

[RafaRuiz]

Sorry, I went from issue to issue mainly from the flutter repo and I think I misplaced the comment.