Flutter How to show a message when flutter search filter result no result
276
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;
});
Author by
mideveloper
Updated on January 04, 2023Comments
-
mideveloper over 1 year
I'm using a
TextFormFieldto filter an array of lists usingGridViewto display the Items. Inside myTextFormFieldthere I usedonChanged: onSearchTextChanged,which filters through the array response from the Rest API I created which is injson. 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
Johnis not part of the return array list forusername, fullnamethen on the screen it should show a message that saysnot 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', ), ), ),) ], ), ), ]))));})) -
mideveloper almost 2 yearsThanks, I just updated my question with where the search result displays.
-
mideveloper almost 2 yearsYour above solution works to an extent but when
No results founddisplayed at the point where user input is not available the message still shows when the keyboard backspace is pressed and the left input value still shows result on my search list. For instance, I inputJohnsand it is not available on my search list and I removesleavingjohnwhich is available on my search list, the ````No results found``` keeps shhowing. I modify your answer to best suit the right answer to this question.