StateFlow and SharedFlow in Android Kotlin - UI Render Trace

Component - StateFlow and SharedFlow

This UI component demonstrates how StateFlow and SharedFlow work in Android Kotlin for managing and sharing state and events in a reactive way.
StateFlow holds a current state and emits updates, while SharedFlow emits events to multiple subscribers without holding state.

Widget Tree

Activity
├── Column (vertical layout)
│   ├── Text (StateFlow value display)
│   ├── Button (Update StateFlow)
│   ├── Text (SharedFlow event display)
│   └── Button (Emit SharedFlow event)

The root is an Activity containing a vertical Column layout. Inside the Column, there are two Text widgets showing the current StateFlow value and the latest SharedFlow event. Below each Text is a Button: one to update the StateFlow state, and one to emit a new SharedFlow event.

Render Trace - 6 Steps

Step 1: Activity

Step 2: Column

Step 3: Text (StateFlow value display)

Step 4: Button (Update StateFlow)

Step 5: Text (SharedFlow event display)

Step 6: Button (Emit SharedFlow event)

State Change - Re-render

Trigger:User clicks 'Increment StateFlow' button

Before

StateFlow value is 0

→

After

StateFlow value updates to 1

Re-renders:Text widget displaying StateFlow value re-renders to show 'StateFlow value: 1'

UI Quiz - 3 Questions

What happens visually when the 'Increment StateFlow' button is clicked?

A The StateFlow text updates to show the new incremented value

B The SharedFlow event text changes immediately

C Both texts reset to zero

D Nothing changes on screen

Key Insight

StateFlow is great for holding and observing a current state that updates over time, like a counter value. SharedFlow is ideal for one-time events or messages that multiple parts of the app need to react to, such as notifications or commands. Using these flows in UI lets your app react smoothly and update only what changed.