Styjun

I have a group profile page, where a user can change the description of a group. He clicks on the description, gets on a new screen and saves it to Firestore. He then get's back via Navigator.pop(context) to the group profile page which lists all elements via FutureBuilder.

First, I had the database request for my FutureBuilder inside the main build method (directly inside future builder 'future: request') which was working but I learnt it is wrong. But now I have to wait for a rebuild to see changes. How do I tell FutureBuilder that there is a data update?

I am loading Firestore data as follows within the group profile page:

Future<DocumentSnapshot> _future;

 @override
 void initState() 
 super.initState();
 _getFiretoreData();
 

 Future<void> _getFiretoreData() async
 setState(() 

 this._future = Firestore.instance
 .collection('users')
 .document(globals.userId.toString())
 .get(););
 

The FutureBuilder is inside the main build method and gets the 'already loaded' future like this:

FutureBuilder(future: _future, ...)

Now I would like to tell him: a change happened to _future, please rebuild ;-).

Ok, I managed it like this (which took me only a few lines of code). Leave the code as it is and get a true callback from the navigator to know that there was a change on the second page:

// check if second page callback is true
 bool _changed = await Navigator.push(
 context,
 MaterialPageRoute(
 builder: (context) =>
 ProfileUpdate(userId: globals.userId.toString())),
 );
// if it's true, reload future data
_changed ? _getFiretoreData() : Container();

On the second page give the save button a Navigator.pop(context, true).

Why don't you use Stream builder instead of Future builder?

StreamBuilder(stream: _future, ...)

You can change the variable name to _stream for clarity.

i would advice you not to use future builder in this situation and use future.then() in an async function and after you get your data update the build without using future builder..!

Future getData() async 
 //here you can call the function and handle the output(return value) as result
 getFiretoreData().then((result) 
 // print(result);
 setState(() 
 //handle your result here.
 //update build here.
 );
 );
 

How about this?

@override
Widget build(BuildContext context) 
 if (_future == null) 
 // show loading indicator while waiting for data 
 return Center(child: CircularProgressIndicator());
 else 
 return YourWidget();
 

You do not need to set any state. You just need to return your collection of users in your GetFirestoreData method.

Future<TypeYouReturning> _getFirestoreData() async
 return Firestore.instance
 .collection('users')
 .document(globals.userId.toString())
 .get();

Inside your FutureBuilder widget you can set it up something like Theo recommended, I would do something like this

return FutureBuilder(
 future: _getFirestoreData(),
 builder: (context, AsyncSnapshot<TypeYouReturning> snapshot) 
 if (!snapshot.hasData) 
 return Center(
 child: CircularProgressIndicator(),
 );
 else 
 if (snapshot.data.length == 0)
 return Text("No available data just yet");

 return Container();//This should be the desire widget you want the user to see
 
 ,
);