Flow basics in Android Kotlin - Mini App: Build & Ship

Build: Flow Counter Screen

This screen shows a number that updates every second using Kotlin Flow. It demonstrates how to collect and display data from a Flow in an Android app.

Target UI

---------------------
| Flow Counter      |
|-------------------|
| Current count: 0  |
|                   |
| (Updates every 1s)|
---------------------

Use a Kotlin Flow that emits an increasing integer every second starting from 0.

Collect the Flow in the UI and display the current count.

Update the displayed number automatically as the Flow emits new values.

Use a ViewModel to hold the Flow and expose it to the UI.

Use Jetpack Compose for the UI.

Starter Code

Android Kotlin

import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewmodel.compose.viewModel
import kotlinx.coroutines.flow.Flow
import kotlinx.coroutines.flow.flow
import kotlinx.coroutines.delay

class MainActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: android.os.Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
      FlowCounterScreen()
    }
  }
}

class CounterViewModel : ViewModel() {
  val counterFlow: Flow<Int> = flow {
    // TODO: Emit increasing numbers every second
  }
}

@Composable
fun FlowCounterScreen(counterViewModel: CounterViewModel = viewModel()) {
  // TODO: Collect counterFlow and display the current count
  Text(text = "Current count: ?")
}

Task 1

Task 2

Solution

Android Kotlin

import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewmodel.compose.viewModel
import kotlinx.coroutines.flow.Flow
import kotlinx.coroutines.flow.flow
import kotlinx.coroutines.delay

class MainActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: android.os.Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
      FlowCounterScreen()
    }
  }
}

class CounterViewModel : ViewModel() {
  val counterFlow: Flow<Int> = flow {
    var count = 0
    while(true) {
      emit(count)
      count++
      delay(1000L)
    }
  }
}

@Composable
fun FlowCounterScreen(counterViewModel: CounterViewModel = viewModel()) {
  val count by counterViewModel.counterFlow.collectAsState(initial = 0)
  Text(text = "Current count: $count")
}

We created a counterFlow in the CounterViewModel that emits an increasing integer every second using a while(true) loop with delay(1000L). In the Compose UI, we collect this flow as state using collectAsState with an initial value of 0. This way, the UI automatically updates the displayed count every second as new values are emitted from the flow.

This example shows the basics of Kotlin Flow: creating a flow, emitting values over time, and collecting them in the UI reactively.

Final Result

Completed Screen

---------------------
| Flow Counter      |
|-------------------|
| Current count: 5  |
|                   |
| (Updates every 1s)|
---------------------

The number after 'Current count:' increases by 1 every second automatically.

No user input is needed; the screen updates itself.

Stretch Goal

Add a button to pause and resume the counter updates.

💡 Hint

Use a MutableState<Boolean> in the ViewModel to control emitting values and collect it in the UI to toggle emission.