Flutter UI Widgets

Nov 9 2021 · Dart 2.14, Flutter 2.5, VS Code 1.61

Part 1: Flutter UI Widgets

07. Use the FutureBuilder Widget

Episode complete

Play next episode

Next
About this episode

Leave a rating/review

See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 06. Work with BottomNavigationBar Next episode: 08. Style Your App with Themes

Get immediate access to this and 4,000+ other videos and books.

Take your career further with a Kodeco Personal Plan. With unlimited access to over 40+ books and 4,000+ professional videos in a single subscription, it's simply the best investment you can make in your development career.

Learn more Already a subscriber? Sign in.

Notes: 07. Use the FutureBuilder Widget

At 03:31, the ListView.builder is supposed to use the snapshot’s data instead of the articles variable. So the ListView.builder should look like this:

return ListView.builder(
  itemCount: snapshot.data!.length,
  itemBuilder: (BuildContext context, int index) {
    return ArticleCard(article: snapshot.data[index]);
  },
);

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now
(silence) In that programming language. A synchronous tasks are handled with a future or a stream. We'll be focusing on futures here. A future is used, when you want to perform time consuming tasks, were the data is not returned immediately. This could be tasks like reading a file or downloading contents over the internet. These tasks don't return their values immediately. Instead they're returned sometime in the future. Hence the name "future." According to that documentation, a "future" is an object representing a delete computation. Flutter provides us with a FutureBuilder widget that helps handle futures effectively. The future can be completed with either a value or an error. The FutureBuilder handles all the states without the need for us to manually call-set-dates. Back in vicious studio code, convert the homepage widget to a stateful widget and add in the following code. (silence) (silence) In here, we added a future articles as a member of a state object. It is a future of 'type-list' of articles, meaning, it is going to hold a list of articles that will be returned sometime in the future. Next, we have arrived the in need state method, which is a method of the state's class. This method is called when the widget is inserted into the widget tree and it is called only once. We use this method to initialize or execute one of operations, once the widget is mounted. In this case, we initialize the future articles, variable, to article repeal that get articles, which returns a future, that is a list of articles. Now, click on the article repeal class and press the F12 key to go to its definition. The article repeal class is a repository. The repository is where the data access logic is stored. It's hides the business logic and provides a simple layer for data access. This is called "the repository pattern." So view the business logic, click on the article API and once again, press the F12 key. The "fetch articles method" makes an online request. The success Boolean is provided. If it's set to 'true," then we turn the future that will be delayed for some seconds, before the value is sent. This is just a simulate, an actual network delay. Here, we use the future that delayed to construct also to achieve this. The value sent is still the same articles variable that stores the list of articles from the model foul. let's head back to the homepage widgets and update it to use the FutureBuilder. Go ahead and update your build method to the following. (silence) (silence) (silence) This returns a FutureBuilder that expect a list of articles. We pass on the future we initialize previously in the in its state method. The Builder is called whenever the value of the future changes. The FutureBuilder widget uses the Builder to update the widgets based on different snapshots on the future. Now, a snapshot is just a representation of the most recent interaction with their synchronous tasks. So it simply contains information of different scenarios like the data, the connection states, the error and other checks for their synchronous tasks. Remember a future can return a value or an error, and these are different data that is contained inside the snapshot supplied by the FutureBuilder. In this code, we check to see if the snapshot has received data from the future and if "yes", we return the list view. If it returns an error, then we return an error text. And finally, if none of these conditions are met, we return a circular progress indicator, which shows that we are waiting the results. Set this file and do a hard restart. Remember you do a hard restart because the "in-need-state" is called only once and this is when the widget is added to the tree, or in other words, when the widget is mounted. You can see a lot in spinner and the result is shown after some delay. Finally, let's check to see what the error state looks like. Let's head over to article API class and change the Boolean property to false. Then you do a hard restart and you can see the error state.