TextFieldto take the search term as input and a
ListViewto display the results.
TextFieldproperties to match your app's design style. Add a search
Iconto signify that it's a search field.
TextField. This would be required to use the latest text field value as the search term.
ListViewwidget onto the canvas.
ListViewthat you need for displaying the search result. (In the following demo, you will find that two
Textwidgets are added inside a
TextFieldvalue as the search term, you should choose From Variable.
TextField, select the Source as Widget State and choose the field name under Available Options.
ListView, for example, a
ListViewwidget, the code will be similar to this:
FutureBuilderto handle the search backend query.
futureproperty, the search query is specified along with the search term and the maximum results to display.
builder, it is checked whether the response is available. If it's still processing a progress indicator is shown, otherwise
snapshot.datais used to retrieve the response. Then it's checked whether the response is empty and a widget is displayed accordingly.