Decode FutureBuilder
An in-depth look at Flutter’s FutureBuilder Widget
--
So what is the FutureBuilder Widget?
Simply put, it’s an elegant way for your app ‘to wait’ for an asynchronous operation to complete before it proceeds. In many cases, it’s used to create the ‘home screen’ for the app by building a widget based on the latest ‘condition’ of a specified Future object. Specifically, building and likely then displaying a particular widget depending upon whether the asynchronous operation associated with a specified Future object is completed yet or not. Further, when completed, building and likely then displaying a particular widget depending upon the resulting value represented by that Future object. In the case of the ‘home screen’ scenario, until the Future object’s asynchronous operation is completed, the app will usually display a ‘waiting’ or ‘loading’ screen.
So, what is the FutureBuilder widget? As it happens, the FutureBuilder widget is a StatefulWidget. In this article, we’ll review how it works.
I Like Screenshots. Click For Gists.
As always, I prefer using screenshots over gists to show concepts rather than just show code in my articles. I find them easier to work with frankly. However, you can click or tap on these screenshots to see the code they represent in a gist or in Github. Ironically, it’s better to read this article about mobile development on your computer than on your phone. Besides, we program on our computers — not on our phones. For now.
Let’s begin.
Learn By Example
We will use an example from the Flutter Cookbook, fetch data from the internet, to demonstrate a FutureBuilder in action. Below is a screenshot of part of that example displaying a StatelessWidget and how its parameter, post, is provided to a FutureBuilder widget as an instantiated Future object.
