Flutter - How to search in List and display in ListView? - flutter

Question

I'm coding a search system for the Flutter application I've developed. I'm having a problem with the back-end. First I pull the data from Firebase Firestore. Then I convert it to Model structure.
The code of the search system:
StreamBuilder(
stream: db.collection("DebrisPeoples").snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return const Center(
child: CircularProgressIndicator(),
);
} else {
final List<DebrisPeopleModel> data = snapshot.data!.docs
.map((e) => DebrisPeopleModel.fromDocument(e))
.toList(); // To Model code
return Column(
children: [
const SizedBox(height: 10),
SizedBox(
width: MediaQuery.of(context).size.width * 0.95,
child: TextFormField(
decoration: InputDecoration(
prefixIcon: const Icon(Icons.search),
contentPadding: const EdgeInsets.only(),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
),
),
onChanged: (value) {
final find = data.where(
(element) => data.contains(element.nameSurname));
print(find); // PROBLEM - NOT WORKING
},
),
),
SizedBox(
width: double.infinity,
height: MediaQuery.of(context).size.height * 0.8,
child: ListView.builder(
physics: const BouncingScrollPhysics(),
itemCount: data.length,
itemBuilder: (context, index) {
return Card(
child: ListTile(
leading: Icon(
data[index].personSize == 1
? Icons.person
: Icons.people,
),
title: Text(data[index].nameSurname.toString()),
subtitle: Text(
"${data[index].city} / ${data[index].district}",
),
trailing: IconButton(
icon: const Icon(Icons.info),
onPressed: () {
Get.to(const UnderRublePeopleDetailPage(),
arguments: data[index]);
print(data[index].nameSurname);
},
),
),
);
},
),
),
],
);
}
},
),
I'm having the problem in the query part. My goal is, for example, if there is a record in the form of ABC, I want it to appear in the results even if the user searches for A or AB.
Then I want the results to be displayed in the list. I will be grateful for your help :)
To change search results:
final find = data.where((element) => element
.nameSurname!
.toLowerCase()
.contains(value.toLowerCase()));
print(find);
setState(() {
data = find.toList();
print(data);
});
I tried to make such a search system. However, the results in the ListView do not change as I enter the TextFormField.

Answer 1

Your onChanged code should be as following.
onChanged: (value) {
final find = data.where(
(element) => element.nameSurname.toLowerCase().contains(value.toLowerCase()));
print(find);
}
Make sure you are managing the state to reflect the changes on UI.
Edited
final controller = TextEditingController();//Keep this as a field
StreamBuilder(
stream: db.collection("DebrisPeoples").snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return const Center(
child: CircularProgressIndicator(),
);
} else {
final searchText = controller.text.trim().toLowerCase();
final List<DebrisPeopleModel> data = snapshot.data!.docs
.map((e) => DebrisPeopleModel.fromDocument(e))
.where((e) => searchText.isEmpty || e.nameSurname!
.toLowerCase().contains(searchText))
.toList(); // To Model code
return Column(
children: [
const SizedBox(height: 10),
SizedBox(
width: MediaQuery
.of(context)
.size
.width * 0.95,
child: TextFormField(
controller: controller,
decoration: InputDecoration(
prefixIcon: const Icon(Icons.search),
contentPadding: const EdgeInsets.only(),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
),
),
onChanged: (value) {
setState((){ });
},
),
),
SizedBox(
width: double.infinity,
height: MediaQuery
.of(context)
.size
.height * 0.8,
child: ListView.builder(
physics: const BouncingScrollPhysics(),
itemCount: data.length,
itemBuilder: (context, index) {
return Card(
child: ListTile(
leading: Icon(
data[index].personSize == 1
? Icons.person
: Icons.people,
),
title: Text(data[index].nameSurname.toString()),
subtitle: Text(
"${data[index].city} / ${data[index].district}",
),
trailing: IconButton(
icon: const Icon(Icons.info),
onPressed: () {
Get.to(const UnderRublePeopleDetailPage(),
arguments: data[index]);
print(data[index].nameSurname);
},
),
),
);
},
),
),
],
);
}
},
)