Whenever I use Search bar to filter result, it will automatically refresh data (show all listing after showing result) after 2 seconds of showing filter result. How can I stop it from refreshing automatically?
Here is my code printing the result in view:
Expanded(
child: FutureBuilder<List<categories_all>>(
future: fetchhome(),
builder: (context, snapshot) {
if (snapshot.hasData) {
List<categories_all> data = snapshot.data;
datalist = snapshot.data;
return Container(
margin: EdgeInsets.only(top: 10.0),
child:category_list_view(
shippingToList: data)
);
} else if (snapshot.hasError) {
return Text("${snapshot.error}");
}
return Container(
alignment: Alignment.center,
width: scU.scale(60),
height: scU.scale(60),
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(
kCircularProgressIndicatorColor),
));
}),
),
Search bar performing on changed function when ever text value is changed by the user
child: TextField(
// onChanged: (text) {
// text = text.toLowerCase();
// filter(text);
//
// },
style: TextStyle(
fontSize: scU.scale(11),
color: Color.fromRGBO(237, 204, 147, 1),
fontWeight: FontWeight.w500),
textAlign: TextAlign.start,
keyboardType: TextInputType.text,
onChanged: (value) {
filterSearchResults(value);
},
decoration: new InputDecoration(
isDense: true,
border: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
hintText: "Search Rings, Necklaces",
prefixIcon: const Icon(
Icons.search,
color: Color.fromRGBO(237, 204, 147, 1),
),
hintStyle: TextStyle(
fontFamily: 'Satisfy-Regular',
fontSize: scU.scale(9.5),
color: parseColor("#edcc93"),
),
),
)
filtered method:
This method is used to filter the search result
void filterSearchResults(String query) {
List<categories_all> dummySearchList = List<categories_all>();
dummySearchList.addAll(datalist);
if(query.isNotEmpty) {
List<categories_all> dummyListData = List<categories_all>();
dummySearchList.forEach((item) {
if(item.name.contains(query)) {
dummyListData.add(item);
}
});
setState(() {
datalist.clear();
datalist.addAll(dummyListData);
});
return;
}
}
Solution 1: cameron1024
In your FutureBuilder
you set: future: fetchhome()
. Assuming this creates a new Future
, you should make your widget a StatefulWidget
and call this method once inside initState()
and store the resulting Future
in a variable in your State
class.
build()
should be have no side effects (i.e. it should not modify state). This is because you cannot control when build()
gets called. For example, if the user opens the keyboard or changes to landscape orientation, it can cause a rebuild.
State objects are longer-lived, and if the widgets haven't changed much (i.e. the runtimeType
and key
are the same as the previous frame), the state object will persist, and initState()
will not be called again. This makes it a good place to start asynchronous work (like a network call).