Firestore Data Update the Page Refresh automatically - flutter

Question

I use listen() in retrieving data from Firestore. I am also using setData and merge: true to update the data in Firestore. When there is an update in the Firestore it will automatically refresh the whole page. How can I stop that from doing so. I want it to change the value but not refresh the page. Is it possible? Any documentation or sample code is welcome. Thank you in advance.
Update
This is my DropDownButton:
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
DropdownButton(
items: routeName.map((value) {
return DropdownMenuItem<String>(
value: value,
child: new Text(value),
);
}).toList(),
underline: SizedBox(height: 0,),
onChanged: (value) => setState((){
selectedItem = value;
polylineCoordinates.clear();
getRoute();
}),
hint: new Text ("Select a Route"),
value: selectedItem,
)
],
),),
This is where I add in the value in the DropDownButton:
List <String> routeName = [];
Future <void> getRouteName() async{
Firestore.instance.collection('routes').snapshots().listen((RouteData) async {
routeName.clear();
if(RouteData.documents.isNotEmpty){
for (int i = 0; i < RouteData.documents.length; i++){
if(i == 0){
routeName.add("No Route");
}
routeName.add(RouteData.documents[i].documentID);
}
}
setState(() {
});
});
}
This is my initState()
#override
void initState(){
geoService.getCurrentLocation().listen((position){
centerScreen(position);
});
geoService.getCurrentLocation().listen((position) {
_addGeoPoint(position);
});
getMarker();
getRouteName();
retrieveRoute();
super.initState();
}
This is where things go wrong:
Future <void> getRoute() async{
if (selectedItem == "No Route"){
var user = await FirebaseAuth.instance.currentUser();
Firestore.instance.collection('user').document(user.email).setData(
{"Route": "No Route"}, merge: true);
}
var user = await FirebaseAuth.instance.currentUser();
Firestore.instance.collection('user').document(user.email).setData(
{"Route": selectedItem}, merge: true);
}
Because I want it to update to the Firestore whenever I update the value in the DropDownButton, but after the update it will refresh my page and I don't want it to refresh the whole page. I just want it to save to Firestore and update at the DropDownButton only.

Answer 1

If you want to listen to a Stream just one time, you may use the first operator on it:
Firestore.instance.collection('routes').snapshots().first.then(() => {
// this will be called juste once
});

Answer 2

The problem comes from your getRouteName method.
Future <void> getRouteName() async{
Firestore.instance.collection('routes').snapshots().listen((RouteData) async {
routeName.clear();
if(RouteData.documents.isNotEmpty){
for (int i = 0; i < RouteData.documents.length; i++){
if(i == 0){
routeName.add("No Route");
}
routeName.add(RouteData.documents[i].documentID);
}
}
setState(() {
});
});
}
}
Every time you call setState, it will cause the UI to be repainted. Since you use listen to get called for any changed to routes, and call setState() for every such change, any change to routes will repaint the UI.
If you don't want to repaint the UI altogether, remove the call to setState(). If you want to repaint the UI only in certain conditions, wrap the call to setState() in those conditions.