Flutter How to show a message when flutter search filter result no result

Question

I'm using a TextFormField to filter an array of lists using GridView to display the Items. Inside my TextFormField there I used onChanged: onSearchTextChanged, which filters through the array response from the Rest API I created which is in json. The filter works fine but I'm looking for a way around showing no result when the user inputs a filter that is not available inside the filter. Below is my code:

TextFormField is as below:

TextFormField(

         controller: controller,
         keyboardType: TextInputType.text,
         onChanged: onSearchTextChanged,

             decoration: InputDecoration(
               border: InputBorder.none,

               contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
           prefixText: ' ',
           hintText: "Search",
           hintStyle: TextStyle(
               color: Colors.grey,fontWeight: FontWeight.normal,
               fontSize: 15,
               fontFamily:
               'Montserrat'),
           prefixIcon: Container(
               child:Icon(
                 Icons.search,
                 color: Colors.grey,
                   size: 20,
               )),

           suffixIcon: backClear==true?InkWell(
               onTap: () {
                 controller.clear();
                 onSearchTextChanged(
                     '');
               },
               child: Container(
                   child:Icon(
                     Icons.backspace,
                     color: Colors.grey,
                     size: 12,
                   ))): Container(
               child:Icon(
                 Icons.view_list_rounded,
                 color: Colors.grey,
                 size: 15,
               )),


           labelStyle: new TextStyle(color: Colors.grey),

         ),
       )

onSearchTextChanged is as below:

onSearchTextChanged(String text) async {
    _searchResult.clear();
    if (text.isEmpty) {
      setState(() {

        backClear=false;

      });
      return;
    }

    content.forEach((userDetail) {
      if (userDetail.username.toLowerCase().contains(text) || userDetail.username.toString().contains(text) ||
           userDetail.username.toUpperCase().contains(text)||userDetail.fullname.toLowerCase().contains(text) || userDetail.fullname.toString().contains(text) ||
           userDetail.fullname.toUpperCase().contains(text)||userDetail.phone.toLowerCase().contains(text) || userDetail.phone.toString().contains(text) ||
           userDetail.phone.toUpperCase().contains(text)||userDetail.email.toLowerCase().contains(text) || userDetail.email.toString().contains(text) ||
           userDetail.email.toUpperCase().contains(text) ) {
        _searchResult.add(userDetail);
      }

    });

    setState(() {

      backClear=true;


    });


  }

  

For instance if John is not part of the return array list for username, fullname then on the screen it should show a message that says not found.

My gridview is as below:

Container(

      child: _searchResult.length != 0 ||
      controller.text.isNotEmpty
      ?new GridView.builder(
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),

          itemCount: _searchResult == null ? 0 : _searchResult.length,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount:3),
          itemBuilder: (BuildContext context, int index){

            return Card(
                elevation: 1,
                semanticContainer: true,
                child:InkWell(
                    onTap: () async {


                    },
                    child: Container(
                        padding: EdgeInsets.all(10),
                        child:Column(
                            crossAxisAlignment:
                            CrossAxisAlignment.start,
                            children: <Widget>[
                              Flexible(
                                child: Column(
                                  children: <Widget>[

                                    Stack(

                                      alignment: Alignment.bottomCenter,

                                      children: [
                                        CircleAvatar(
                                          radius: 30,
                                          backgroundColor: Colors.white,
                                          child: _searchResult[index].profile_img!=null?Container(
                                              padding: EdgeInsets.all(0),
                                              child:CircleAvatar(

                                                radius: 40,
                                                backgroundImage:NetworkImage(_searchResult[index].profile_img
                                                  ,),
                                                backgroundColor: Colors.white,
                                                //
                                              )):Container(
                                              padding: EdgeInsets.all(0),
                                              child:CircleAvatar(

                                                radius: 40,
                                                backgroundImage:AssetImage('assets/person_icon.png'),
                                                backgroundColor: Colors.white,
                                                //
                                              )),
                                        ),

                                      ],),



                                    Flexible(
                                        child:   Center(child: Text(_searchResult[index].username==null?"AppName":_searchResult[index].username,style: TextStyle(
                                          color: colorBlack,
                                          fontWeight: FontWeight.normal,
                                          fontSize: 10,
                                          fontFamily: 'Montserrat',
                                        ),))),


                                    Flexible(
                                      child:   Container(
                                        padding: EdgeInsets.only(left: 15,right: 15,top: 1,bottom: 1),
                                        decoration: BoxDecoration(
                                            color: colorBlue,borderRadius: BorderRadius.circular(3)),

                                        child: Text( "Follow",
                                          style: TextStyle(
                                            color: Colors.white,
                                            fontWeight: FontWeight.bold,
                                            fontSize: 10,
                                            fontFamily: 'Montserrat',
                                          ),
                                        ),
                                      ),)

                                  ],
                                ),
                              ),
                            ]))));
            ;})

          :GridView.builder(
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),

          itemCount: content == null ? 0 : content.length,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount:3),
          itemBuilder: (BuildContext context, int index){
            return Card(
                elevation: 1,
                semanticContainer: true,
                child:InkWell(
                    onTap: () async {


                    },
                    child: Container(
                        padding: EdgeInsets.all(10),
                        child:Column(
                            crossAxisAlignment:
                            CrossAxisAlignment.start,
                            children: <Widget>[
                              Flexible(
                                child: Column(
                                  children: <Widget>[

                                    Stack(

                                      alignment: Alignment.bottomCenter,

                                      children: [
                                        CircleAvatar(
                                          radius: 30,
                                          backgroundColor: Colors.white,
                                          child: content[index].profile_img!=null?Container(
                                              padding: EdgeInsets.all(0),
                                              child:CircleAvatar(

                                                radius: 40,
                                                backgroundImage:NetworkImage(content[index].profile_img
                                                  ,),
                                                backgroundColor: Colors.white,
                                                //
                                              )):Container(
                                              padding: EdgeInsets.all(0),
                                              child:CircleAvatar(

                                                radius: 40,
                                                backgroundImage:AssetImage('assets/person_icon.png'),
                                                backgroundColor: Colors.white,
                                                //
                                              )),
                                        ),

                                      ],),



                                    Flexible(
                                        child:   Center(child: Text(content[index].username==null?"AppName":content[index].username,style: TextStyle(
                                          color: colorBlack,
                                          fontWeight: FontWeight.normal,
                                          fontSize: 10,
                                          fontFamily: 'Montserrat',
                                        ),))),


                                    Flexible(
                                      child:   Container(
                                        padding: EdgeInsets.only(left: 15,right: 15,top: 1,bottom: 1),
                                        decoration: BoxDecoration(
                                            color: colorBlue,borderRadius: BorderRadius.circular(3)),

                                        child: Text( "Follow",
                                          style: TextStyle(
                                            color: Colors.white,
                                            fontWeight: FontWeight.bold,
                                            fontSize: 10,
                                            fontFamily: 'Montserrat',
                                          ),
                                        ),
                                      ),)

                                  ],
                                ),
                              ),
                            ]))));}))

Answer 1

With the suggestion of Dani3le_ to use add below if statement inside my onSearchTextChanged and I declare my bool showNotFoundText = false; above my code

if (_searchResult.isEmpty) {
      //Do something
      setState(() {
         showNotFoundText = true;
      });
    }

and above my Gridview I added the below to show the No result message find below the code:

showNotFoundText==true ? Text("No result found!",style: TextStyle(fontFamily: 'Montserrat',color: Colors.grey, fontSize: 13, fontWeight: FontWeight.bold),) : Container(),

But onPress of backspace the No result found still shows even if the input is available on the search list so I add showNotFoundText = false; to setState() so that every time the backspace is pressd it set the state of showNotFoundText back to false as shown below:

setState(() {
        showNotFoundText = false;

 });

Answer 2

I'm not sure on where you actually display results in your sample code, but the logic you could implement is the following. After the forEach you should check if some result is actually found, and in case it wasn't, set a showNotFoundText to true so that in your view you can display the message.

onSearchTextChanged(String text) async {
    _searchResult.clear();
    if (text.isEmpty) {
      setState(() {
        backClear=false;
        showNotFoundText = false;
      });
      return;
    }

    content.forEach((userDetail) {
      if (userDetail.username.toLowerCase().contains(text) || userDetail.username.toString().contains(text) ||
           userDetail.username.toUpperCase().contains(text)||userDetail.fullname.toLowerCase().contains(text) || userDetail.fullname.toString().contains(text) ||
           userDetail.fullname.toUpperCase().contains(text)||userDetail.phone.toLowerCase().contains(text) || userDetail.phone.toString().contains(text) ||
           userDetail.phone.toUpperCase().contains(text)||userDetail.email.toLowerCase().contains(text) || userDetail.email.toString().contains(text) ||
           userDetail.email.toUpperCase().contains(text) ) {
        _searchResult.add(userDetail);
      }
    });

    if (_searchResult.isEmpty) {
      //Do something
      setState(() {
         showNotFoundText = true;
      });
    }

    setState(() {
      backClear=true;
    });

  }

Add something like this in your view

showNotFoundText ? Text("No results found") : Container() //Empty container instead

Since you didn't include the code for the results display, I made it this way, but you may also consider using this logic directly in your view:

_searchResult.isEmpty ? Text("No results found") : DisplayResultsWidget()