Loading and error states in Flutter - UI Render Trace

Component - Loading and error states

This UI component shows how an app displays a loading spinner while waiting for data and an error message if loading fails. It helps users understand what is happening and keeps the app friendly and clear.

Widget Tree

Scaffold
├── AppBar
└── Center
    └── ConditionalWidget
        ├── CircularProgressIndicator (if loading)
        ├── Text (if error)
        └── Text (if data loaded)

The Scaffold provides the basic screen structure with a top bar (AppBar). The main content is centered. Inside the center, a widget shows either a spinner when loading, an error message if loading failed, or the loaded data text if successful.

Render Trace - 3 Steps

Step 1: Scaffold

Step 2: Center

Step 3: ConditionalWidget

State Change - Re-render

Trigger:Data fetch starts, completes, or fails

Before

loading = true, error = false, data = null

→

After

loading = false, error = true, data = null (if failed) OR loading = false, error = false, data = 'Loaded data' (if success)

Re-renders:The ConditionalWidget and its children re-render to show spinner, error text, or data text accordingly

UI Quiz - 3 Questions

What does the CircularProgressIndicator show in this UI?

A The loaded data text

B A static image to show an error

C A spinning circle to show loading is in progress

D A button to retry loading

Key Insight

Showing clear loading and error states improves user experience by informing users about app status. Using a spinner for loading and a visible error message helps users understand what is happening and reduces confusion.