Kotlin Multiplatform Academy · Pelajaran

Membuka Status UI sebagai StateFlow

Publikasikan satu sumber kebenaran untuk layar

Membuka Status UI sebagai StateFlow adalah pelajaran Kotlin Multiplatform Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Kotlin Multiplatform Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Kotlin Multiplatform Academy mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

One Source of Truth

Your screen needs a single, reliable picture of its data. A StateFlow gives you exactly that: one observable value the UI can trust.

Model the Screen as State

Bundle everything the screen shows into one immutable data class. Loading, data and errors all live together in a single object.

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

Keep a Private MutableStateFlow

Inside the ViewModel hold a private MutableStateFlow. Only your code may change it, so state stays controlled and predictable.

private val _state =
    MutableStateFlow(HomeState())

Expose a Read-Only View

Publish it as a read-only StateFlow. The UI can collect values but can never write to it directly. Encapsulation, kept clean.

val state: StateFlow<HomeState> =
    _state.asStateFlow()

It Always Has a Value

Unlike a plain Flow, a StateFlow always holds a current value. New collectors instantly get the latest state, no waiting.

Update with .update

Change state safely using update. It copies the current value and applies your change atomically, even across threads.

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

copy Keeps It Immutable

Because the state is a data class, copy produces a fresh object with one field changed. Old state is never mutated in place.

Load Data, Then Emit

Launch a coroutine, fetch your data, then emit the new state. The UI re-renders automatically when the value changes. ✨

scope.launch {
    val name = repo.greet()
    _state.update { it.copy(name = name) }
}

StateFlow vs LiveData

Android devs know LiveData, but it is JVM-only. StateFlow works on every KMP target, so it is the portable choice.

Read the Value Directly

Need the current state without collecting? Just read .value. Handy for tests or one-off checks inside the ViewModel.

val current = _state.value

The UI Stays Dumb

The screen only collects state and draws it. All decisions stay in shared code, so both apps behave identically.

Quick Check

Let's confirm why we split mutable and read-only flows.

Recap

Bundle screen data in a state class, hold it in a private MutableStateFlow, and expose a read-only StateFlow the UI just observes. 🚀

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Membuka Status UI sebagai StateFlow” gratis?

Ya — teks lengkap “Membuka Status UI sebagai StateFlow” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Kotlin Multiplatform Academy, upgrade ke CoddyKit PRO. Kursus Kotlin Multiplatform Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Membuka Status UI sebagai StateFlow”?

Publikasikan satu sumber kebenaran untuk layar Kamu berlatih Kotlin Multiplatform Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Kotlin Multiplatform Academy?

Tidak diperlukan pengalaman sebelumnya. Kotlin Multiplatform Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Membuka Status UI sebagai StateFlow” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Kotlin Multiplatform Academy ini?

Ya. Setiap pelajaran Kotlin Multiplatform Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Kotlin Multiplatform Academy