Flow basics in Android Kotlin - UI Render Trace

Component - Flow basics

This UI component demonstrates the basics of Kotlin Flow in an Android app. It shows a simple screen with a button and a text view. When the button is clicked, a Flow emits a sequence of numbers, and the UI updates the text view with each number as it arrives.

Widget Tree

Activity
└── ConstraintLayout
    ├── TextView
    └── Button

The root is an Activity hosting a ConstraintLayout. Inside the layout, there is a TextView at the top center showing the current number emitted by the Flow, and a Button below it that starts the Flow when clicked.

Render Trace - 3 Steps

Step 1: Activity

Step 2: Button

Step 3: Flow collector

State Change - Re-render

Trigger:User clicks the 'Start Flow' button

Before

TextView shows 'Press Start', no Flow emissions active

→

After

TextView updates every second to show the next number emitted by the Flow from 1 to 5

Re-renders:TextView updates on each emission; Button remains unchanged

UI Quiz - 3 Questions

What happens when the user clicks the 'Start Flow' button?

A The Flow starts emitting numbers and the TextView updates with each number

B The Button label changes to 'Stop Flow'

C The app navigates to a new screen

D Nothing happens

Key Insight

Using Kotlin Flow in Android allows the UI to react to data streams asynchronously. This pattern helps keep the UI updated smoothly as new data arrives, similar to how a friend might tell you numbers one by one and you write them down immediately.

Practice

1. What is the primary purpose of a Flow in Kotlin?

easy

A. To represent a stream of data that can emit multiple values over time

B. To store a single immutable value

C. To create a user interface layout

D. To handle exceptions synchronously

Solution

1. Step 1: Understand what Flow represents

   A Flow is designed to emit multiple values asynchronously over time, like a stream of data.

2. Step 2: Compare options with Flow's purpose

   Only To represent a stream of data that can emit multiple values over time correctly describes Flow as a stream of data emitting multiple values over time.

3. Final Answer:

   To represent a stream of data that can emit multiple values over time -> Option A

4. Quick Check:

   Flow = stream of data [OK]

Hint: Flow emits multiple values over time, not just one [OK]

Common Mistakes:

• Confusing Flow with a single value container like LiveData
• Thinking Flow is for UI layout
• Assuming Flow handles exceptions synchronously

2. Which of the following is the correct way to create a Flow that emits numbers 1 to 3?

easy

A. val flow = flow { emit(1); emit(2); emit(3) }

B. val flow = flowOf(1, 2, 3)

C. All of the above

D. val flow = listOf(1, 2, 3).asFlow()

Solution

1. Step 1: Review Flow creation methods

   Kotlin provides multiple ways to create flows: using flow builder with emit, flowOf, and converting collections with asFlow().

2. Step 2: Check each option

   val flow = flow { emit(1); emit(2); emit(3) } uses flow builder with emit calls, B uses flowOf, and C converts a list to flow. All are valid ways.

3. Final Answer:

   All of the above -> Option C

4. Quick Check:

   Multiple ways to create Flow = D [OK]

Hint: Remember flow, flowOf, and asFlow() all create flows [OK]

Common Mistakes:

• Thinking only flow builder with emit works
• Confusing flowOf with a list
• Not knowing asFlow() converts collections

3. What will be printed by this code?

val flow = flow {
  emit(10)
  emit(20)
}

runBlocking {
  flow.collect { value -> println(value) }
}

medium

A. No output

B. 20 10

C. Only 10

D. 10 20

Solution

1. Step 1: Understand flow emission order

   The flow emits 10 first, then 20 in order.

2. Step 2: Collect prints emitted values in order

   Collect receives values in the same order they are emitted, so prints 10 then 20.

3. Final Answer:

   10 20 -> Option D

4. Quick Check:

   Flow emits in order = 10 20 [OK]

Hint: Flow emits values in order unless otherwise specified [OK]

Common Mistakes:

• Assuming values print in reverse order
• Expecting only first value to print
• Forgetting to run collect inside coroutine

4. Identify the error in this code snippet:

val flow = flow {
  emit(1)
  emit(2)
}

flow.collect { println(it) }

medium

A. Missing coroutine scope to call collect

B. emit() cannot be called inside flow builder

C. collect should be replaced with collectLatest

D. No error, code is correct

Solution

1. Step 1: Check how collect is called

   collect is a suspend function and must be called inside a coroutine or suspend function.

2. Step 2: Analyze code context

   Here, collect is called directly without coroutine scope like runBlocking or launch, causing error.

3. Final Answer:

   Missing coroutine scope to call collect -> Option A

4. Quick Check:

   collect needs coroutine scope [OK]

Hint: Always call collect inside coroutine scope [OK]

Common Mistakes:

• Calling collect outside coroutine
• Thinking emit() is invalid inside flow
• Confusing collect with collectLatest necessity

5. You want to create a Flow that emits numbers 1 to 5 but only collect even numbers. Which code correctly achieves this?

hard

A. val flow = flow {
for (i in 1..5) emit(i)
}

runBlocking {
flow.collect { if (it % 2 == 0) println(it) }
}

B. All of the above

C. val flow = flow {
for (i in 1..5) if (i % 2 == 0) emit(i)
}

runBlocking {
flow.collect { println(it) }
}

D. val flow = flowOf(1, 2, 3, 4, 5)

runBlocking {
flow.filter { it % 2 == 0 }.collect { println(it) }
}

Solution

1. Step 1: Analyze each code snippet

   val flow = flow { for (i in 1..5) emit(i) } runBlocking { flow.collect { if (it % 2 == 0) println(it) } } emits all numbers and filters during collect; C emits only even numbers directly; D uses filter operator before collect.

2. Step 2: Confirm all produce only even numbers on collect

   All options print only even numbers 2 and 4 when collected.

3. Final Answer:

   All of the above -> Option B

4. Quick Check:

   Multiple ways to filter Flow = B [OK]

Hint: Filter before or during collect both work [OK]

Common Mistakes:

• Thinking filter must be before collect only
• Not realizing emit can be conditional
• Forgetting to run collect inside coroutine