Do you know the ways to represent states in Jetpack Compose?

Figure 1 Structures represented by states

Property UI’s state

var name by mutableStateOf("")
private set
var phone by mutableStateOf("")
private set
var address by mutableStateOf("")
private set
var payEnable by mutableStateOf(false)
private set
var name by remember { mutableStateOf("") }
var phone by remember { mutableStateOf("") }
var address by remember { mutableStateOf("") }
var payEnable by remember { mutableStateOf(false) }
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue

We have only talked about representing properties or variables through states using mutableStateOf component. However, it is also possible that data streams can be represented as states and observed by Composables. These additional options are related to Flow, LiveData o RxJava. In my book Building Modern Apps for Android, I talk a little more about that topic.

Component UI’s state

data class FormUiState(
val nameValueChanged: String = "",
val phoneValueChanged: String = ""
val addressValueChanged: String = ""
)
val FormUiState.successValidated: Boolean get() = nameValueChanged.length > 1 && phoneValueChanged.length > 3

Screen UI’s state

sealed class OrderScreenUiState {
data class Success(val order: Order): OrderScreenUiState()
data class Failed(val message: String): OrderScreenUiState()
object Loading: OrderScreenUiState()
}

Modeling and grouping events

Figure 2: Multiple events
Figure 3: Grouping events
sealed class ContactFormEvent {
data class OnNameChange(val name: String): FormUiEvent()
data class OnPhoneChange(val phone: String): FormUiEvent()
data class OnAddressChange(val address: String): FormUiEvent()
object PayOrder: FormUiEvent()
}
Figure 4: Building e-commerce with Compose for Android

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store