Flutter Loading Screen with Future Builder

When developing UIs you need to give the user some feedback on a long-running process. A loading widget is normally the go-to solution. In React you would have a boolean property in the components state. If for example, you are fetching some data from the internet, you would set the boolean to true. In the component's render method you would display a loading widget based on the value of that boolean property. When you have your data you show the right component. Something like:

This can be achieved easily in Flutter with Future Builder. FutureBuilder allows you to specify a future and a builder function. The builder function will be passed snapshots based on the state of the future. You can then check the snapshot and display your loading widget. The same can be achieved by using view models and state management tools like Provider. This is so much easier though. Example: