Async/await and Futures in Flutter - UI Render Trace

Component - Async/await and Futures

This Flutter component demonstrates how to use async/await with Futures to fetch data asynchronously. It shows a button that, when pressed, starts loading data and then displays the result once ready.

Widget Tree

Scaffold
├─ AppBar
│  └─ Text
└─ Center
   └─ Column
      ├─ ElevatedButton
      └─ Padding
         └─ Text

The Scaffold provides the basic page structure with an AppBar at the top showing a title. The body centers a Column containing a button and a text widget below it. The button triggers the async data fetch, and the text shows loading status or the fetched data.

Render Trace - 5 Steps

Step 1: Scaffold

Step 2: Center

Step 3: Column

Step 4: ElevatedButton

Step 5: Text

State Change - Re-render

Trigger:User taps the 'Fetch Data' button

Before

Text shows 'Press the button to fetch data.' and button is enabled

→

After

Text changes to 'Loading...' while waiting for data, then updates to 'Data fetched: Hello from async!' after 2 seconds

Re-renders:The Text widget inside Padding and the ElevatedButton (to disable during loading) re-render

UI Quiz - 3 Questions

What happens to the text when the button is pressed?

A It changes to 'Loading...' immediately

B It stays the same until data is fetched

C It disappears

D It shows an error message

Key Insight

Using async/await in Flutter lets you write code that waits for data without freezing the app. The UI updates to show loading status, keeping users informed and the app responsive.