Flutter search on listView with multiple values

Question

I need to simply implement a search with multiple values on ListView. It's working fine with a single value I am stuck on how can I use this for multiple values.

My code

    Padding(
      padding: const EdgeInsets.only(top: 11),
      child: Container(
        width: Width * 0.9,
        child: TextFormField(
          onChanged: (value) {
            setState(() {
              searchString = value;
            });
          },
          decoration: new InputDecoration(
            suffixIcon: Padding(
              padding: const EdgeInsets.all(5.0),
              child: ClipOval(
                child: Material(
                  color: Color(0xffdee8ec), // Button color
                  child: InkWell(
                    splashColor: Colors.red, // Splash color
                    onTap: () {},
                    child: Icon(
                      Icons.search_outlined,
                      color: kPrimaryColor,
                      size: 20,
                    ),
                  ),
                ),
              ),
            ),
            labelText: "Search",
            labelStyle:
                TextStyle(color: textGreyColor, fontFamily: 'SegoeUI'),
            filled: true,
            fillColor: Colors.white,
            focusedBorder: OutlineInputBorder(
              borderRadius: new BorderRadius.circular(10),
              borderSide: BorderSide(color: kPrimaryColor, width: 1.0),
            ),
            enabledBorder: OutlineInputBorder(
              borderRadius: new BorderRadius.circular(10),
              borderSide:
                  BorderSide(color: Color(0xffE6E6E6), width: 1.0),
            ),

            border: new OutlineInputBorder(
              borderRadius: new BorderRadius.circular(10),
              borderSide: new BorderSide(color: Color(0xffE6E6E6)),
            ),
            //fillColor: Colors.green
          ),
          keyboardType: TextInputType.emailAddress,
          style: new TextStyle(
              fontFamily: "SegoeUI", color: kPrimaryColor),
        ),
      ),
    ),
    Container(
      width: Width * 0.9,
      child: ListView.builder(
        padding: EdgeInsets.only(top: 10),
        itemCount: _serviceList.length,
        shrinkWrap: true,
        scrollDirection: Axis.vertical,
        physics: ScrollPhysics(),
        itemBuilder: (context, index) {
          return _serviceList[index]['serviceName']
                  .toString()
                  .contains(searchString)
              ? Padding(
                  padding: const EdgeInsets.only(bottom: 7),
                  child: Container(
                    width: Width * 0.9,
                    child: Card(
                      elevation: 2,
                      color: Colors.white,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10.0),
                      ),
                      child: Padding(
                          padding: const EdgeInsets.all(10.0),
                          child: Row(
                            mainAxisAlignment:
                                MainAxisAlignment.spaceBetween,
                            children: [
                              Column(
                                mainAxisAlignment:
                                    MainAxisAlignment.start,
                                crossAxisAlignment:
                                    CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    '${_serviceList[index]['serviceName']} ',
                                    style: TextStyle(
                                        fontFamily: 'SegoeUI',
                                        color: kPrimaryColor,
                                        fontSize: 15),
                                  ),
                                  SizedBox(
                                    height: 5,
                                  ),
                                  Text(
                                    '${_serviceList[index]['serviceDuration']}',
                                    style: TextStyle(
                                        fontFamily: 'SegoeUI',
                                        color: textGreyColor,
                                        fontSize: 15),
                                  )
                                ],
                              ),
                            ],
                          )),
                    ),
                  ),
                )
              : Container();
        },
      ),
    )

You can see it's now searching with ServiceName only I need to use it for multiple values and have no idea how can I do this or I need to change the way I am doing this

You want to search depends on list which is data from API? Try my answer here hope it's helpful to you — Ravindra S. Patil
– Ravindra S. Patil, Commented Aug 21, 2021 at 17:33
Does this answer your question? Flutter comparing a value with two strings — Arda Senoglu
– Arda Senoglu, Commented Aug 21, 2021 at 18:56

Nagulan S · Accepted Answer · 2021-08-21 17:41:13Z

1

You could continue the way you are doing itself. Setup multiple input fields as required and get the value to be searched and include it along with this particular part as conditions:

return _serviceList[index]['serviceName']
                  .toString()
                  .contains(searchString)
              ?

I guess it would be easier and successful. Do comment if you need future clarifications.

answered Aug 21, 2021 at 17:41

Nagulan S

7701 gold badge5 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rameez khan Over a year ago

Nup i need to do from one TextField

Nagulan S Over a year ago

Okay, I don't think that would be a problem. So just use the searchString for multiple fields in _serviceList. Change the data type as needed for the fields if that's the problem. If all are in strings then use just the same condition repeatedly like: _serviceList[index]['x'].toString() .contains(searchString) || _serviceList[index]['y'].toString() .contains(searchString) ?

Collectives™ on Stack Overflow

Flutter search on listView with multiple values

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related