MWCodebymw.de ↗
Kotlin

StateFlow im ViewModel sauber in Compose einsammeln

So hältst du deinen UI-State im ViewModel als StateFlow und liest ihn in Compose lebenszyklus-sicher mit collectAsStateWithLifecycle() aus – ohne Sammel-Leaks im Hintergrund.

Wenn ich in einer Android-App den Zustand eines Screens verwalte, lege ich ihn im ViewModel als StateFlow ab und lese ihn in Compose mit collectAsStateWithLifecycle(). Der Vorteil: Die UI sammelt nur, solange sie sichtbar ist – im Hintergrund pausiert das Sammeln automatisch, und du sparst dir Batterie und subtile Bugs.

Das ViewModel

Ich halte einen privaten MutableStateFlow und gebe nach außen nur den unveränderlichen StateFlow heraus. So kann die UI den State lesen, aber nie direkt schreiben.

data class UiState(
    val isLoading: Boolean = false,
    val name: String = "",
    val error: String? = null,
)

class ProfileViewModel : ViewModel() {

    private val _state = MutableStateFlow(UiState())
    val state: StateFlow<UiState> = _state.asStateFlow()

    fun onNameChange(value: String) {
        _state.update { it.copy(name = value) }
    }

    fun load() {
        viewModelScope.launch {
            _state.update { it.copy(isLoading = true, error = null) }
            runCatching { repository.fetchName() }
                .onSuccess { name -> _state.update { it.copy(isLoading = false, name = name) } }
                .onFailure { e -> _state.update { it.copy(isLoading = false, error = e.message) } }
        }
    }
}

In Compose auslesen

collectAsStateWithLifecycle() steckt in der Abhängigkeit androidx.lifecycle:lifecycle-runtime-compose. Der State wird an den Lifecycle der Composable gebunden – landet die App im Hintergrund, stoppt das Sammeln.

@Composable
fun ProfileScreen(viewModel: ProfileViewModel = viewModel()) {
    val state by viewModel.state.collectAsStateWithLifecycle()

    Column {
        if (state.isLoading) CircularProgressIndicator()
        OutlinedTextField(
            value = state.name,
            onValueChange = viewModel::onNameChange,
            label = { Text("Name") },
        )
        state.error?.let { Text(text = it, color = MaterialTheme.colorScheme.error) }
    }
}

Wichtig: Benutze collectAsStateWithLifecycle() und nicht das ältere collectAsState(). Letzteres sammelt auch dann weiter, wenn der Screen gar nicht sichtbar ist.

Mit diesem Muster baue ich für meine Kundinnen und Kunden Apps, die auch bei Konfigurationswechseln und im Hintergrund sauber bleiben. Wenn du so eine App brauchst, meld dich gern über bymw.de.

Quellen

#StateFlow#ViewModel#Compose#Coroutines#Lifecycle

Du brauchst mehr als ein Snippet?

Ich entwickle Android-Apps in Kotlin und moderne Websites für Selbstständige und kleine Unternehmen — von der ersten Idee bis zum Release.

Projekt anfragen →