Flutter - FutureBuilder - Search

Issue

I am using a FuturBuilder for a List of Users. I get the users through the futur: fetchpost() via API. At the start at column I implemented a Searchbar. So how can I implement that my Searchbar is searching?

Container(
        child: FutureBuilder(
          future: fetchPost(),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            if(snapshot.connectionState == ConnectionState.waiting) {
              return Container(
                child: ...CircularPro..(),
                ),

            } else {
              return Container(
                child: Column(
                  children: <Widget>[
                    Padding(
                      child: TextField(
                        onChanged: (value) {

                        },
                        controller: searchController,
                        decoration: InputDecoration(
                          prefixIcon: Icon(Icons.search),
                        ),

                      ),
                    ),
                    Expanded(
                      child: ListView.builder(
                        itemCount: snapshot.data.length,
                        itemBuilder: (BuildContext context, int index) {
                          return ListTile(  
                            title: Text(
                              "[" + 
                              snapshot.data[index].id + "] " + 
                              snapshot.data[index].firstname + " " +
                              snapshot.data[index].lastname
                            ),
                            subtitle: Text(snapshot.data[index].email),

Solution

You need to take some variable for condition on ListView and set that variable's values on search bar's submit event then setState() of widget.

String searchString = "";

---

TextField(
                        onChanged: (value) {
                          setState((){
                             searchString = value; 
                          });

                        },
                        controller: searchController,
                        decoration: InputDecoration(
                          prefixIcon: Icon(Icons.search),
                        ),

                      ),

---

 ListView.builder(
                        itemCount: snapshot.data.length,
                        itemBuilder: (BuildContext context, int index) {
                          return snapshot.data[index].firstname.contains(searchString)? ListTile(  
                            title: Text(
                              "[" + 
                              snapshot.data[index].id + "] " + 
                              snapshot.data[index].firstname + " " +
                              snapshot.data[index].lastname
                            ),
                            subtitle: Text(snapshot.data[index].email),
...

:Container(),

Answered By - Vrushi Patel