flutter search in multiple strings - flutter

Question

I have search field that filter my list and it works fine I just want to make small changes to it:
Logic
Back to full list when user clear search field
search also be included of ListTile->subtitle currently only search in title
Code search function is commented for better understanding
List<World> locations = [...]
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
buildSearch(),
Expanded(
child: ListView.builder(
itemCount: locations.length,
itemBuilder: (context, index) {
return Card(
child: ListTile(
onTap: () {},
title: Text(locations[index].location),
subtitle: Text(locations[index].country),
),
),
},
),
),
],
),
),
}
Widget buildSearch() => SearchWidget(
text: query,
hintText: 'Search for location',
onChanged: searchLocation,
);
void searchLocation(String query) async {
// currently only search in titles (need to add subtitle as well)
final newLocations = locations.where((location) {
final nameLower = location.location.toLowerCase();
final searchLower = query.toLowerCase();
return nameLower.contains(searchLower);
}).toList();
// when user clear search or remove letters list wont back to it's default
setState(() {
this.query = query;
this.locations = newLocations;
});
}
Any suggestions?
Update
here is my SearchWidget file (just in case)
class SearchWidget extends StatefulWidget {
final String text;
final ValueChanged<String> onChanged;
final String hintText;
const SearchWidget({
Key key,
this.text,
this.onChanged,
this.hintText,
}) : super(key: key);
#override
_SearchWidgetState createState() => _SearchWidgetState();
}
class _SearchWidgetState extends State<SearchWidget> {
final controller = TextEditingController();
#override
Widget build(BuildContext context) {
final styleActive = TextStyle(color: Colors.black);
final styleHint = TextStyle(color: Colors.black54);
final style = widget.text.isEmpty ? styleHint : styleActive;
return Container(
height: 42,
margin: const EdgeInsets.fromLTRB(16, 16, 16, 16),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
color: Colors.white,
border: Border.all(color: Colors.black26),
),
padding: const EdgeInsets.symmetric(horizontal: 8),
child: TextField(
controller: controller,
decoration: InputDecoration(
icon: Icon(Icons.search, color: style.color),
suffixIcon: widget.text.isNotEmpty
? GestureDetector(
child: Icon(Icons.close, color: style.color),
onTap: () {
controller.clear();
widget.onChanged('');
FocusScope.of(context).requestFocus(FocusNode());
},
)
: null,
hintText: widget.hintText,
hintStyle: style,
border: InputBorder.none,
),
style: style,
onChanged: widget.onChanged,
),
);
}
}
UPDATE 2
I've managed to fix #2 in my logic and get subtitles include search results by following code (clear search issue still remains)
void searchLocation(String query) async {
final newLocations = locations.where((location) {
final nameLower = location.location.toLowerCase();
final countryLower = location.country.toLowerCase(); // added
final searchLower = query.toLowerCase();
return nameLower.contains(searchLower) || countryLower.contains(searchLower); //changed
}).toList();
setState(() {
this.query = query;
this.locations = newLocations;
});
}
Note:
I've accepted Yair Chen answer but I need to make some clarifications to address the issue:
Based on Yair Chen answer I had to create new list List<World> filteredLocations = [];
Then in my ListView.builder I've changed itemCount and child like following:
ListView.builder(
itemCount: filteredLocations.isNotEmpty ? filteredLocations.length : locations.length,
//...
child: filteredLocations.isNotEmpty ? card(... //filteredLocations[index].location//...) : Card(... //locations[index].location// ...),
This way index issue on filtered result solved and card data will get data regarding of the list they are returning from.

Answer 1

You can add another list called filteredLocations and then save to the filtered location the new list. The function .where() changes the original List as well which you dont want. You can shallow copy (using spread operator) the list and then create a new list that matches the query like that:
void searchLocation(String query) async {
// currently only search in titles (need to add subtitle as well)
// [...locations] copies the list to not change original list
final newLocations = [...locations].where((location) {
final nameLower = location.location.toLowerCase();
final searchLower = query.toLowerCase();
// Also adding subtitle check (whether the name contains it or the subtitle does
return nameLower.contains(searchLower) || location.subtitle.toLowerCase().contains(searchLower);
}).toList();
// when user clear search or remove letters list wont back to it's default
setState(() {
this.query = query;
this.filteredLocations = newLocations;
});
}
This way the original list will never be changed and only the filteredList will be updated. It'll also fix the issue that when the string is empty you want all the items to appear.
Good luck and let me know if you need anything else :)