Listview filter search in Flutter

Question

  var userDetails = {};
  var i;
  List returnTicketDetails = [] ;

  body: new Column(
        children: <Widget>[
          new Container(
            color: Theme.of(context).primaryColor,
            child: new Padding(
              padding: const EdgeInsets.all(8.0),
              child: new Card(
                child: new ListTile(
                  leading: new Icon(Icons.search),
                  title: new TextField(
                    controller: controller,
                    decoration: new InputDecoration(
                        hintText: 'Search', border: InputBorder.none),
                   // onChanged: onSearchTextChanged,
                  ),
                  trailing: new IconButton(icon: new Icon(Icons.cancel), onPressed: () {
                    controller.clear();
                   // onSearchTextChanged('');
                  },),
                ),
          new Expanded(
            child: userDetails.length != 0 || controller.text.isNotEmpty
                ? new ListView.builder(
               itemCount: userDetails.length,
              itemBuilder: (context, i) {
                return new Card(

                  child: new Column
                    (mainAxisSize: MainAxisSize.min, children:
                    <Widget>[
                    new Row(children: <Widget>[
                    new Container(
                    width: 80.0,
                    height: 80.0,
                    decoration: new BoxDecoration(
                    shape: BoxShape.circle,
                    image: new DecorationImage(
                    fit: BoxFit.fill,
                    image: new NetworkImage(
                    "https:..")
                )
                )),
                    new Text(userDetails[returnTicketDetails[i]["user_id"]]["first_name"]
                    ),),
                  ,),
                    new Text(userDetails[returnTicketDetails[i]["user_id"]]["last_name"]),
                );
                },
            )
                : new ListView.builder(
               itemCount: userDetails.length,
              itemBuilder: (context, i) {
                return new Card(
                  child: new ListTile(
                    //title: new Text(userDetails[returnTicketDetails[i]["user_id"]]["first_name"]),
                  ),
                  margin: const EdgeInsets.all(0.0),
                );
    );
      }
 _getTicketDetails() async {
     final response = await http.get(
         "https..", headers: {
       HttpHeaders.AUTHORIZATION: access_token
     });
      returnTicketDetails = json.decode(response.body);
     for ( i = 0; i < (returnTicketDetails?.length ?? 0); i++) {
       final ticketresponse = await http.get(
           "https...", headers: {
         HttpHeaders.AUTHORIZATION:
         access_token
       });
       userDetails[returnTicketDetails[i]["user_id"]] =
           json.decode(ticketresponse.body);
   }
   }

I was wondering how to make the search function works according to the index of my ListView? So for instance if I input a z according to my case, I should not display anything in the List. I have also updated and posted the function _getTicketDeatils() here.

Answer 1

I would recommend you this article from medium search as you type,which implements search using streams the basic idea is like this

1. get your data store in a list(in initstate to use this list later in step 5)
2. search for your query in above list (ontext changed in query)
3. store the filtered result (from above search) in a new list 
4. add the filtered list to a streams (to show updated result in UI using streambuilder)
5. if searchquery is empty add the datastore list to stream (to show complete data in UI)

the lower half of the image shows the sample implementation

This is the output of the above implementation process if this is what you want the above article is for you.