Mastering UI States in Jetpack Compose with sealed class

Jetpack Compose simplifies building modern UIs in Android, but managing different states of the UI — like loading, success, and error — can still be a challenge. In this article, we’ll explore how to handle UI states effectively using a sealed class in combination with StateFlow and Compose.

Why Use a sealed class for UI States?

sealed class in Kotlin allows you to create a restricted hierarchy of classes, making it perfect for representing finite UI states like Loading, Error, and Data.

With this approach:

• You gain type safety, ensuring each state is handled explicitly.
• It’s clean and scalable, as adding new states only requires creating a new subclass.
• Your UI code becomes reactive and declarative.

Implementation: Step-by-Step

1. Define the UIState Sealed Class

First, create a UIState class with three states: Loading, Error, and Data.

sealed class UIState<out T> {
    object Loading : UIState<Nothing>()
    data class Error(val message: String) : UIState<Nothing>()
    data class Data<T>(val data: T) : UIState<T>()
}