Delaying UI Build To Get Data

Flutter Future Builder Example

The problem of how to execute an async function before the UI builds was vexing to me.

The answer turned out to be quite simple. Use the FutureBuilder option. Using this option itself can see vexing at first, but it is also simple, once you know how.

  1. Specify the async function to execute before the build. In the below example, the function is called _doWork().
  2. Set the name of the variable that can be tested to determine if work is completed. In the below case “canbeanyname”. It can be any name and does not have to be previously defined.

3. Write the _doWork() function. In this case, building a list of images that have network addresses and will be retrieved asynchronously.

4. Complete the build function

Full working code can be found here:

Registered “non-partisan”, blogging about culture, politics, technology, photography, travel, and life. Owner of “art.bohcay.com”.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store