How to deal with textfield and viewmodel? should I...

# compose

[Pablo]

How to deal with textfield and viewmodel? should I have the value of the textfield inside the uistate variable of the viewmodel? or should I have it in a mutable state var in the viewmodel? I'm attaching some samples in the thread...

[Pablo]

ViewModel Approach 1:

data class MainScreenUiState(
    val loading: Boolean = false,
    val textFieldValue: String
)

private val _uiState = MutableStateFlow<MainScreenUiState>(MainScreenUiState(loading = true))
    val uiState: StateFlow<MainScreenUiState> = _uiState

fun updateTextFieldValue(value: String) {
    _uiState.value = _uiState.value.copy(textFieldValue = value)
}

val uiState by viewModel.uiState.collectAsStateWithLifecycle()
TextField(
    value = uiState.textFieldValue ,
    onValueChange = { viewModel.updateTextFieldValue(it) }
)

[Pablo]

ViewModel Approach 2:

var textFieldValue by mutableStateOf("")

fun updateTextFieldValue(value: String) {
    textFieldValue = value
}

TextField(
    value = viewModel.textFieldValue ,
    onValueChange = { textFieldValue.updateTextFieldValue(it) }
)

[Stylianos Gakis]

https://medium.com/androiddevelopers/effective-state-management-for-textfield-in-compose-d6e5b070fbe5

[Pablo]

so I must avoid using uistate

[Pablo]

and instead of that I must use mutablestateof variable inside the viewmodel, one for each textfield

[Pablo]

do I understood it correctly?

[Stylianos Gakis]

Or better yet, use TextFieldState https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/text/input/TextFieldState.kt;l=59?q=TextFieldState&sq=

[Zach Klippenstein (he/him) [MOD]]

I don’t think the stable material release supports it yet, but once it does - yea definitely

[Stylianos Gakis]

Or better yet, don't use material3 😅

[Pablo]

if we don't use material3, what should we use?

[Pablo]

and why you recommend to not using it?

[Stylianos Gakis]

Just joking, use whatever fits your needs.
We mostly don't use material because our design system doesn't match material, that's all 🤷