Web Browser Native Search

[sidrao2006]

Use case

Add support for browser search

Proposal

1. Let browser handle the search

2. Provide a widget specifically to support static text features

3. Let html handle semantics and rendering for such elements

4. Use the Intersection Observer API (https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to detect searches. Also add style change listeners to the text, such that it won't be triggered when the framework changes the style of the text but will be triggered when the browser changes the text style (since the browser changes the text style to highlight the searched words)

5. Once the framework knows that the browser is navigating to a certain piece of text, render the relevant elements/widgets which are supposed to be in the surroundings of the text

6. The static text rendering widget should be low level and abstracted under the Text widget such that static text mide will be enabled automatically for texts that do not have dynamic dependencies.

[sidrao2006]

cc @yjbanov @Hixie

[yjbanov]

Just some brainstorming:

Browser native search may not be the best fit for Flutter due to lazy rendering, and because it's unclear how the same functionality can be achieved on mobile and desktop. A custom search might be a better fit because it would work on all platforms. We should make sure that developers can easily implement text search in their apps. Perhaps the framework could assist somehow, I'm not sure. A quick survey of non-Flutter web apps shows that many developers prefer custom search bars, e.g. Twitter, Gmail, Discord, Docs, Calendar, Slack, Chat, Maps, Facebook. Many actively redirect the Ctrl + F shortcut to their custom search bars. In some text heavy cases both can be used (and are useful): Github, Amazon.com.

Mobile users frequently don't have keyboards, so there's no way to intercept Ctrl + F. If there's no app-specific search bar, they would invoke "Find in page..." (also available on desktop browsers, if you know where to find it in the menus). I imagine, however, that users would prefer the custom search bar, especially if it's sufficiently prominent on the UI.

I will deduplicate this with #65504, but I'll copy the text of the discussion so it's easier to track.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.