Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter - FutureBuilder - Search

Tags:

flutter

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),


like image 436
Timebreaker900 Avatar asked Nov 30 '25 16:11

Timebreaker900


1 Answers

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(),
like image 109
Vrushi Patel Avatar answered Dec 02 '25 06:12

Vrushi Patel



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!