Eugene Lim
Reputation: 11
Flutter - Search bar displaying duplicate results
I am using search delegate to implement my search function. It can search the serial number or even the station location. Searching the serial number seems to be working fine, but when i search the location, it results in duplication of my results. The list seems to rebuild and show duplicate results Below here is the screenshot of the output when I search the location. Any help would be very appreciated.
Search bar display duplicate results
class Search extends SearchDelegate<String> {
final List stationList;
Search(
this.stationList,
);
ScrollController _scrollController = ScrollController();
@override
List<Widget> buildActions(BuildContext context) {
return [
Padding(
padding: EdgeInsets.only(right: 2),
child: IconButton(
onPressed: () {
buildResults(context);
},
icon: Icon(Icons.search)),
),
Padding(
padding: EdgeInsets.only(left: 2),
child: IconButton(
onPressed: () {
query = '';
},
icon: Icon(Icons.clear)),
),
];
}
@override
Widget buildLeading(BuildContext context) {
return IconButton(
onPressed: () {
Navigator.pop(context);
},
icon: Icon(Icons.arrow_back_ios),
);
}
@override
Widget buildResults(BuildContext context) {
print(stationList);
final suggestionList = query.isEmpty
? stationList
: stationList
.where((element) => element['serial_number']
.toString()
.toUpperCase()
.startsWith(query.toUpperCase())
|| element['location']
.toString()
.toUpperCase()
.startsWith(query.toUpperCase()))
.toList();
return Scaffold(
backgroundColor: Color.fromARGB(255, 255, 246, 247),
body: ListView.builder(
itemCount: suggestionList.length,
itemBuilder: (context, index) {
return SingleChildScrollView(
physics: ClampingScrollPhysics(),
controller: _scrollController,
child: Stack(
children: [
Column(children: [
Container(
child: ListView(
physics: ClampingScrollPhysics(),
shrinkWrap: true,
children: <Widget>[
for (int index = 0;
index < suggestionList.length;
index++)
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => StationData(
stationSerialNumber:
suggestionList[index]
['serial_number'],
)));
},
child: Container(
margin: EdgeInsets.only(
bottom: ScreenSize.blockSizeVertical * 1),
color: ColorTheme.white,
child: Padding(
padding: const EdgeInsets.all(15),
child: Row(
children: [
Expanded(
flex: 1,
child: LayoutBuilder(
builder: (context, constraints) {
return Container(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment
.spaceEvenly,
children: [
Container(
child:
SingleChildScrollView(
scrollDirection:
Axis.horizontal,
child: Row(
children: [
Icon(
Icons.wifi_tethering,
color: ColorTheme.secondary,
size: constraints.maxWidth *10 /100,
),
SizedBox(
width: ScreenSize.blockSizeVertical *1.5),
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Row(
children: [
SizedBox(
width: constraints.maxWidth *0.02,
),
Text(
'${suggestionList[index]['serial_number']}',
style:
TextStyle(
fontSize:ScreenSize.blockSizeVertical *2.5,
),
),
SizedBox(
width: constraints.maxWidth *0.05,
),
TextButton(
onPressed:null,
child: Text(
'${suggestionList[index]['status']}',
style:
TextStyle(
fontSize:
ScreenSize.blockSizeVertical *1.8,
color: suggestionList[index]['status'] =='Under QC'
? Colors.redAccent
: Colors.greenAccent,
fontWeight:
FontWeight.bold,
),
),
),
],
),
SizedBox(
height: ScreenSize.blockSizeVertical *1),
Row(
children: [
Icon(
Icons.location_on,
color: ColorTheme.secondary,
size: constraints.maxWidth *4 /100,
),
SizedBox(
width: constraints.maxWidth *1 / 100),
Text(
'${suggestionList[index]['location']}',
style: TextStyle(
fontSize:ScreenSize.blockSizeVertical *2,
color: ColorTheme.black),
),
SizedBox(
width: constraints.maxWidth *5 /100),
Icon(
Icons.access_time,
color: ColorTheme.secondary,
size: constraints.maxWidth * 4 /100,
),
SizedBox(
width: constraints.maxWidth *1 /100),
Text(
'Created at ${suggestionList[index]['date_added'].split(' ')[0]}',
style: TextStyle(
fontSize:ScreenSize.blockSizeVertical *2,
color: ColorTheme.black),
),
SizedBox(
width: constraints.maxWidth *10 /100),
],
),
],
),
],
),
),
)
],
),
);
},
),
),
Align(
alignment: Alignment.centerRight,
child: Row(children: [
IconButton(onPressed: () {
Navigator.push(context,
MaterialPageRoute(
builder: (context) =>StationData(
stationSerialNumber:suggestionList[index]['serial_number'],
)));
},
icon: Icon(
Icons.navigate_next,
color: ColorTheme.grey,
size: ScreenSize.blockSizeVertical *6,
),
),
]))
],
),
),
),
),
],
),
),
]),
],
));
},
),
);
}
@override
Widget buildSuggestions(BuildContext context) {
final suggestionList = query.isEmpty
? stationList
: stationList
.where((element) => element['serial_number']
.toString()
.toUpperCase()
.startsWith(query.toUpperCase())
|| element['location']
.toString()
.toUpperCase()
.startsWith(query.toUpperCase()))
.toList();
return Scaffold(
backgroundColor: Color.fromARGB(255, 255, 246, 247),
body: ListView.builder(
itemCount: suggestionList.length,
itemBuilder: (context, index) {
return SingleChildScrollView(
physics: ClampingScrollPhysics(),
controller: _scrollController,
child: Stack(
children: [
Column(children: [
Container(
child: ListView(
physics: ClampingScrollPhysics(),
shrinkWrap: true,
children: <Widget>[
for (int index = 0;
index < suggestionList.length;
index++)
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => StationData(
stationSerialNumber:suggestionList[index]['serial_number'],
)));
},
child: Container(
margin: EdgeInsets.only(
bottom: ScreenSize.blockSizeVertical * 1),
color: ColorTheme.white,
child: Padding(
padding: const EdgeInsets.all(15),
child: Row(
children: [
Expanded(
flex: 1,
child: LayoutBuilder(
builder: (context, constraints) {
return Container(
child: Column(
crossAxisAlignment:CrossAxisAlignment.start,
mainAxisAlignment:MainAxisAlignment.spaceEvenly,
children: [
Container(
child:SingleChildScrollView(
scrollDirection:Axis.horizontal,
child: Row(
children: [
Icon(
Icons.wifi_tethering,
color: ColorTheme.secondary,
size: constraints.maxWidth *10 /100,
),
SizedBox(
width: ScreenSize.blockSizeVertical *1.5),
Column(
crossAxisAlignment:CrossAxisAlignment.start,
children: [
Row(
children: [
SizedBox(
width: constraints.maxWidth *0.02,
),
Text(
'${suggestionList[index]['serial_number']}',
style:TextStyle(
fontSize:ScreenSize.blockSizeVertical *2.5,
),
),
SizedBox(
width: constraints.maxWidth *0.05,
),
TextButton(
onPressed:null,
child: Text(
'${suggestionList[index]['status']}',
style:TextStyle(
fontSize:ScreenSize.blockSizeVertical *1.8,
color: suggestionList[index]['status'] =='Under QC'
? Colors.redAccent
: Colors.greenAccent,
fontWeight:FontWeight.bold,
),
),
),
],
),
SizedBox(
height: ScreenSize.blockSizeVertical *1),
Row(
children: [
Icon(
Icons.location_on,
color: ColorTheme.secondary,
size: constraints.maxWidth *4 /100,
),
SizedBox(
width: constraints.maxWidth *1 /100),
Text(
'${suggestionList[index]['location']}',
style: TextStyle(
fontSize:ScreenSize.blockSizeVertical *2,
color: ColorTheme.black),
),
SizedBox(
width: constraints.maxWidth *5 /100),
Icon(
Icons.access_time,
color: ColorTheme.secondary,
size: constraints.maxWidth *4 /100,
),
SizedBox(
width: constraints.maxWidth *1 /100),
Text(
'Created at ${suggestionList[index]['date_added'].split(' ')[0]}',
style: TextStyle(
fontSize:
ScreenSize.blockSizeVertical *2,
color: ColorTheme.black),
),
SizedBox(
width: constraints.maxWidth *10 /100),
],
),
],
),
],
),
),
)
],
),
);
},
),
),
Align(
alignment: Alignment.centerRight,
child: Row(children: [
IconButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
StationData(
stationSerialNumber:
suggestionList[index]['serial_number'],
)));
},
icon: Icon(
Icons.navigate_next,
color: ColorTheme.grey,
size: ScreenSize.blockSizeVertical *6,
),
),
]))
],
),
),
),
),
],
),
),
]),
],
));
},
),
);
}
}
Upvotes: 1
Views: 179
Answers (1)
MCB
Reputation: 886
Use .toSet() . If the iterable contains an element more than once it gets deleted... so you get a clean list.
Upvotes: 1
Related Questions
- The search bar does not return any results
- Search result returns more than expected objects in flutter
- Search bar implementation not working. Code does not search anything
- Implementation of basic flutter search bar failed
- how to build search bar in flutter?
- SearchDelagate displaying duplicate results
- Searchbar getting Text but not filtering List
- Search Bar and List View Flutter
- Flutter search bar with autocomplete
- Search Items are not showing up during search in SearchBar in Flutter?