Simply a Future is a data that is yet to come and a FutureBuilder is a Widget that can be used to show that data after they received. If you need a detailed description on how to use FutureBuilders you can refer to the following article.
We will use Firebase for this case. This view will get a DocumentReference as a parameter. Then it will fetch data from the Firestore and show it in a Scaffold. For that reason, this view must be a StatefulWidget. Here is the code for that Widget. We will call it the SecondPage.
I think that the above part was straight forward. The state of that Widget will be trickier if you haven’t worked with states that will depend on the values of its Widget.
Now we need to figure out a way to get DocumentReference in the Widget and map it into this data variable. You can achieve that using the following method.
This will get the data from DocumentReference and store it in the data variable as a Future. That code is written inside initState block, therefore it will run once when this SecondPage widget builds for the first time in the Widget tree.
But what if this SecondPage widget was called a second time with a different DocumentReference. Then the initState method will never run and the data variable will never be updated. Then although you called the widget with the correct value, it will never be shown in the UI. Trust me, it will be very confusing if you didn’t know what was happening. To overcome this problem, we can use the following method.
This method is called every time the Widget associated with the State (In our case SecondPage widget) rebuilds. Then it will check whether the DocumentReference passed as an argument has changed and update the data variable accordingly. After setting the value to the data variable, there is no need to call setState because rebuilding is guaranteed after this function call. After all, as I said earlier, the app will go through this routine when the Widget associated with this State is rebuilding. So, calling the build method is guaranteed.
Then what you need is to use a FutureBuilder to present the data when they arrived.
This will show a CircularProgressIndicator until the data comes. After they were received, it will be shown in the Scaffold.
You will ask, why use this data variable? You can just remove it and make this a StatelessWidget and in the FutureBuilder you can call mapData() method. Then the FutureBuilder will fetch data from that method, and the app will work as expected. Right?
Yes, it will fetch and show the data. However, there is a problem. mapData() method will be called every time the widget rebuilds. Then in every call, it will fetch data from Firestore and will create a Future. That means, every time this widget rebuilds, it will show a CircularProgressIndicator first and then will show the data from the database. You don’t need to fetch the data unless the DocumentReference has changed. Therefore, it is not a good way to use a Future inside a build method.
As a summary, I will put the whole code below.
