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.

can you please tell how search for data working for you. I am trying with search on browser with CanvasKit — Ruchira More, Nov 18 '21 at 05:12
similar question is in my mind too https://stackoverflow.com/questions/76192234/search-and-transverse-to-the-specific-string-within-document-in-flutter-applicat Do you have any solution? — blue dream, May 07 '23 at 04:51

score 1 · Answer 1 · answered Oct 01 '21 at 11:31

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!

score 0 · Answer 2 · answered Jul 07 '21 at 09:39

0

This is something not supported by Flutter web yet (tracked here https://github.com/flutter/flutter/issues/53585). One workaround can be to provide an in-app search bar for list views.

answered Jul 07 '21 at 09:39

Hammad Ali Shah

11
3

The issue linked is about a different problem. Searching visible text with the "ellipsis" effect is not the same as searching text that is off screen and is unlikely to resolve the problem OP has described – Alex.F Jul 25 '21 at 08:28

score 0 · Answer 3 · answered Aug 08 '21 at 06:37

0

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.

answered Aug 08 '21 at 06:37

Kaival Patel

461
3
8

score 0 · Answer 4 · edited Aug 27 '21 at 10:48

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.

Can text in a Flutter web app be made searchable?

4 Answers4

Linked