Flutter Provider.of and search - flutter

Question

I am a beginner in flutter and app development. I have a problem. I am using Provider.of in order to get my data. I am getting data and showing it in ListView.builder with no problem. But I want to make a search on my list.
Please refer to code below
class RecipeList extends StatefulWidget {
#override
_RecipeListState createState() => _RecipeListState();
}
class _RecipeListState extends State<RecipeList> {
List<Recipe>showList =List();//creating my list of searched data
#override
Widget build(BuildContext context) {
//getting my recipe list in order to show them
final recipes = Provider.of<List<Recipe>>(context);
showList=recipes;
final user = Provider.of<User>(context);
String _image;
Widget myImage(int index,)
{
if(recipes[index].image == ''){
return Image.asset('images/no_image.jpg');
}
else{
return
FadeInImage.assetNetwork(
width: 300,
height: 250,
placeholder: 'images/loading.webp',
image: recipes[index].image,
);
}
}
return StreamBuilder<UserData>(
stream:DatabaseService(uid: user.uid).userData,
builder: (context,snapshot){
if(snapshot.hasData) {
UserData userdata = snapshot.data;
if (userdata.is_admin == true) {
return Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [Colors.blue[200], Colors.orange[100]])),
child: Scaffold(
appBar: AppBar(
title: Text('Recipes'),
backgroundColor: Colors.transparent,
elevation: 0,
),
backgroundColor: Colors.transparent,
body: Column(
children: <Widget>[
Material(
elevation: 0,
color: Colors.transparent,
child: TextField(
onChanged: (val) {
val = val.toLowerCase();
setState(() {
showList = recipes.where((recipe){
var title = recipe.name.toLowerCase();
return title.contains(val);
}).toList();
});
},
decoration: InputDecoration(
labelText: "Search",
hintText: "Search",
prefixIcon: Icon(Icons.search),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(25.0)))),
),),
SizedBox(height: 15,),
Expanded(
child: ListView.builder(
shrinkWrap: true,
itemCount: showList.length,
itemBuilder: (context, index) {
if (recipes[index].image == null) {
String _image = 'images/new.png';
}
else {
_image = recipes[index].image;
}
// print(recipes[index].image);
return Column(
children: <Widget>[
SlimyCard(
color: Colors.teal[200],
width: 300,
topCardHeight: 350,
bottomCardHeight: 300,
borderRadius: 15,
topCardWidget: Column(
children: <Widget>[
Text(recipes[index].name[0]
.toUpperCase() +
recipes[index].name.substring(1),
style: TextStyle(
fontSize: 35,
color: Colors.white,
fontWeight: FontWeight.bold,
),),
ClipRRect(borderRadius: BorderRadius
.circular(25.0),
child: myImage(index)
),
// Image.network('https://www.bbcgoodfood.com/sites/default/files/recipe-collections/collection-image/2013/05/chorizo-mozarella-gnocchi-bake-cropped.jpg')),
],
),
bottomCardWidget: SingleChildScrollView(
child: Column(
children: <Widget>[
Text('Ingredients',
style: TextStyle(
fontSize: 25,
color: Colors.white
),),
SizedBox(height: 5,),
Text(recipes[index].ingredients,
style: TextStyle(
fontSize: 16
),),
SizedBox(height: 20,),
Text('Recipe',
style: TextStyle(
fontSize: 25
,
color: Colors.white
),),
SizedBox(height: 5,),
Text(recipes[index].recipe,
style: TextStyle(
fontSize: 16
),),
RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius
.circular(7.0),
//side: BorderSide(color: Colors.orange)
),
color: Color.fromRGBO(
233, 217, 108, 1),
onPressed: () async {
final CollectionReference recipecollection = Firestore
.instance.collection(
'recipe');
await recipecollection.document(
recipes[index].id).delete();
StorageReference firestoreStorageref = await FirebaseStorage
.instance
.getReferenceFromUrl(
recipes[index].image);
firestoreStorageref.delete();
},
child: Text(
'Delete'
),
)
],
),
),
slimeEnabled: false,
),
SizedBox(height: 25,)
],
);
},
)),
],
)
),
);
}
I want to show this list on the search and modify it. first I fill it with data from the provider.
I have created a TextField for Search the onChanged method filters the typed value and returns a list. When I print in onChanged function it is working.
I am showing my list with ListView, when I print the size of showList in onChanged function, it filters and gives the right value but when I use it for itemCount it never changes

Answer 1

You can use searchable_dropdown instead of the TextField. You can assign the list to it and it will search the list based on the to string method so you have to override it.
Refer the link to the dependency: https://pub.dev/packages/searchable_dropdown.