Can text in a Flutter web app be made searchable?

Question

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.

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.

Answer 1

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!