Can text in a Flutter web app be made searchable?

user_11625554 0
Viewed 1270

Problem: When I run a Flutter app as a web app in a browser, I can use the browser's text search function Ctrl + F to search for text on the page. The search function finds all of the instances of the search term that are currently shown on screen, but it does not find all of the other instances of the text that are currently out of view.

Example: In the example below I am searching for the word tile, which is used 8 times in total: 4 times in the blue tiles and another 4 times in the purple tiles. However, when I search for the word tile, the browser only finds the 4 instances of the word that are currently shown on the screen at the time of the search. It ignores all instances of the word that are not rendered on the screen at the time of the search.

enter image description here

Documentation: The Flutter and Dart documentation does not have any information on searchable text and I do not see any other similar widgets or properties available.

Attempts: I have tried using a SelectableText widget, but the same problem persists.

flutter-web flutter
4 Answers

You can use element = document.getElementById('searchable_text') and element.textContent || a.innerText. See JavaScript tutorial on W3Schools.

Resources:

  • To create a list and assign it an Id, look at Get Started from Dart docs.
  • To select elements of the HTML document, read querySelector on Dart docs.

Tell us what worked for your!

user_91929540
user_117877040

As flutter draws everything on canvas in web, android and ios so far so it doesn't support it.Means whatever you see, Text, images, etc on any flutter app it is just the drawing made on canvas.

user_94577780

If you scroll your page to the bottom before making a search, you should be able to find all the records you expect.

I believe those contents are not in the DOM until they enter the buffer of your viewport. Meaning, they don't exists to the browser almost until you see them on your screen. As for infinite lists, Flutter generates the rest of the DOM objects of your page while you scroll.

After scrolling, I can search and find all the words I'm reading, I see them highlighted. The browser in not able to center on it when hitting Return or UP and DOWN arrows.

user_86402490
Related