Highlight Search Results in Flutter

Agon Noga
1 min readJul 14, 2019

--

Create a new project and copy-paste this code into main.dart. This is the entire main function. The only things that this main.dart file is missing are (1) the material.dart import, (2) ‘searchMatch’ function, (3) the ‘text’ string on which to conduct the search and highlight the results, and (4) the ‘search’ string. We’ll add those next.

Basically, all that we do here is tell the main function to build the widget tree, starting with StatefulBuilder.

Add (1) the import (material.dart) at the beginning of the file main.dart, (2.1) one TextStyle for matching results (posRes), another (2.2) for text that doesn’t match our results (negRes), the search (3) String, the text String (4) on which to conduct the search, and finally, the searchMatch (5) function.

Click here to go to the gist example that contains the entire code in a single main.dart file.

--

--

Agon Noga

Hi there! I’m a jack of all trades code monkey and I live in Tel Aviv.