How to implement search function in Alert Dialog? - flutter

Question

I want to implement a search bar filter for my ListView items in Alert Dialog. However i think set State does not work for Alert Dialog as I am not getting the desired result. Is there a way to implement this?
My code
class _CreateTaskScreenState extends State<CreateTaskScreen> {
List<String> societiesNames;
var items = List<String>();
#override
void initState() {
int length = widget.societies.length;
List<String> list = new List<String>();
for(var i = 0; i<length; i++){
list.add(widget.societies[i].name);
}
setState(() {
societiesNames = list;
});
items.addAll(societiesNames);
super.initState();
}
String selected;
//Searching the List
void filterSearchResults(String query) {
List<String> dummySearchList = List<String>();
dummySearchList.addAll(societiesNames);
if(query.isNotEmpty) {
List<String> dummyListData = List<String>();
dummySearchList.forEach((item) {
if(item.contains(query)) {
dummyListData.add(item);
}
});
setState(() {
items.clear();
items.addAll(dummyListData);
});
return;
} else {
setState(() {
items.clear();
items.addAll(societiesNames);
});
}
}
#override Widget build(BuildContext context){
//searchbar
Container searchBar = Container(
child: TextField(
onChanged: (value) {
filterSearchResults(value);
},
controller: TextEditingController(),
decoration: InputDecoration(
labelText: "Search",
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(15.0)))),
),
);
//alert dialog on calling show dialog
AlertDialog dialog = AlertDialog(
title: searchBar,
content: Container(
child: ListView.builder(
shrinkWrap: true,
itemCount: items == null? 0: items.length,
itemBuilder: (BuildContext context, int index) {
return Ink(
child: InkWell(
onTap: (){
setState(() {
selected = items[index];
Navigator.pop(context);
});
},
child: ListTile(
title: Text(items[index]),
),
),
);
},
),
),
);
}
}
The list shows properly the first time i open it , however no change takes place on typing in the search bar. And on dismissing and reopening the dialog it shows empty list.

Answer 1

The setState method that you are calling is the one of the '_CreateTaskScreenState' , so you should use a StatefulBuilder and wrap the content of the AlertDialog with it, like that you will be provided with the a setState method that will work for the widget that the builder return !
Like that:
AlertDialog dialog = AlertDialog(
title: searchBar,
content: StatefulBuilder(
builder: (context, setState) => Container(
child: ListView.builder(
shrinkWrap: true,
itemCount: items == null? 0: items.length,
itemBuilder: (BuildContext context, int index) {
return Ink(
child: InkWell(
onTap: (){
setState(() {
selected = items[index];
Navigator.pop(context);
});
},
child: ListTile(
title: Text(items[index]),
),
),
);
},
),
),
)
);