Level 6

ViewModel & Flow (Architecture)

MVVM with StateFlow

Business logic lives in the `ViewModel`. The UI observes `StateFlow`. This survives configuration changes (rotation).

📚 Explanation

ViewModel holds business logic and survives configuration changes. `StateFlow` is a hot flow that emits the current state to collectors. `collectAsStateWithLifecycle` automatically stops collecting when the lifecycle is destroyed, preventing leaks.

Note: Code execution is not available for Android/Kotlin in the browser. Use Android Studio to run and test the app.

kotlin

import androidx.lifecycle.ViewModel
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.asStateFlow
import kotlinx.coroutines.flow.update

// 1. The Logic
class UserViewModel : ViewModel() {
    // Private mutable state
    private val _uiState = MutableStateFlow(UserUiState())
    // Public read-only state
    val uiState = _uiState.asStateFlow()

    fun loadData() {
        _uiState.update { it.copy(isLoading = true) }
        // ... async work ...
        _uiState.update { it.copy(isLoading = false, name = "Cristian") }
    }
}

data class UserUiState(val name: String = "", val isLoading: Boolean = false)

// 2. The UI consumption
@Composable
fun UserScreen(viewModel: UserViewModel = androidx.lifecycle.viewmodel.compose.viewModel()) {
    // "collectAsStateWithLifecycle" is the safest way to collect flows in UI
    val state by viewModel.uiState.collectAsStateWithLifecycle()

    if (state.isLoading) {
        CircularProgressIndicator()
    } else {
        Text("Welcome, ${state.name}")
    }
}

Back to Android Levels Back to Developer Hub

ViewModel & Flow (Architecture)

MVVM with StateFlow

Business logic lives in the `ViewModel`. The UI observes `StateFlow`. This survives configuration changes (rotation).

📚 Explanation

Note: Code execution is not available for Android/Kotlin in the browser. Use Android Studio to run and test the app.

import androidx.lifecycle.ViewModel

import kotlinx.coroutines.flow.MutableStateFlow

import kotlinx.coroutines.flow.asStateFlow

import kotlinx.coroutines.flow.update

// 1. The Logic

class UserViewModel : ViewModel() {

// Private mutable state

private val _uiState = MutableStateFlow(UserUiState())

// Public read-only state

val uiState = _uiState.asStateFlow()

fun loadData() {

_uiState.update { it.copy(isLoading = true) }

// ... async work ...

_uiState.update { it.copy(isLoading = false, name = "Cristian") }

}

data class UserUiState(val name: String = "", val isLoading: Boolean = false)

// 2. The UI consumption

@Composable

fun UserScreen(viewModel: UserViewModel = androidx.lifecycle.viewmodel.compose.viewModel()) {

// "collectAsStateWithLifecycle" is the safest way to collect flows in UI

val state by viewModel.uiState.collectAsStateWithLifecycle()

if (state.isLoading) {

CircularProgressIndicator()

} else {

Text("Welcome, ${state.name}")

}