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',
),
),
),)
],
),
),
]))));}))
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;
});