TextField
to take the search term as input and a ListView
to display the results.TextField
widget from the Widget Panel and drop it onto the canvas. (In the demo below, the TextField
is placed inside the AppBar
of the app).TextField
properties to match your app's design style. Add a search Icon
to signify that it's a search field.TextField
. This would be required to use the latest text field value as the search term.ListView
widget onto the canvas.ListView
that you need for displaying the search result. (In the following demo, you will find that two Text
widgets are added inside a Column
).ListView
widget.TextField
value 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
:ListView
, for example, a Text
widget.ListView
widget, the code will be similar to this:FutureBuilder
to handle the search backend query.future
property, 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.data
is used to retrieve the response. Then it's checked whether the response is empty and a widget is displayed accordingly.