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.

In Dart programming language, asynchronous tasks are handled with a Future or a Stream. We would be focusing on Futures. A Future is used when you want to perform time consuming tasks where the data is not returned immediately. These could be stuffs like reading a file or downloading contents over the internet.

Future<List<Article>> futureArticles;

@override
void initState() {
  super.initState();
  futureArticles = ArticleRepo().getArticles();
}
return FutureBuilder<List<Article>>(
  future: futureArticles,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return ListView.builder(
        // key: PageStorageKey<String>('articles_list'),
        itemCount: snapshot.data!.length,
        itemBuilder: (BuildContext context, int index) {
          return ArticleCard(article: snapshot.data[index]);
        },
      );
    }
    if (snapshot.hasError) {
      return Center(
        child: Text(
          '${snapshot.error}',
          style: const TextStyle(fontSize: 24),
        ),
      );
    }
    return const Center(
      child: CircularProgressIndicator(),
    );
  },
);