How to use ViewModel with Jetpack Compose?

Question

I am trying to use ViewModel with Jetpack Compose by doing a number increment.

It's not working. Maybe I'm not using the ViewModel in the right way.

Here is my Activity code:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting()
        }
    }
}

@Composable
fun Greeting(
    helloViewModel: ViewModel = viewModel()
) {
    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxSize()
    ) {
        Text(
            text = helloViewModel.number.toString(),
            fontSize = 60.sp,
            fontWeight = FontWeight.Bold
        )
        Button(onClick = { helloViewModel.addNumber() }) {
            Text(text = "Increment Number ${helloViewModel.number}")
        }

    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    AppTheme {
        Greeting()
    }
}

Here is my ViewModel code:

class ViewModel: ViewModel() {
    var number : Int = 0
    fun addNumber(){
        number++
    }
}

Any ideas what I am doing wrong?

Answer 1

Your Composable will not pick up the changes in the ViewModel.number value unless the value is contained within a State object. You can wrap the value in a mutable State property with mutableStateOf() or mutableIntStateOf(), as follows:

class ViewModel: ViewModel() {
    var number : Int by mutableIntStateOf(0)
        private set

    fun addNumber(){
        number++
    }
}

Or you can declare the property as a LiveData or Flow and then reference the value as a State object in your Composable with the LiveData.observeAsState() or Flow.collectAsState extension function.

I suggest you start with the State and Jetpack Compose documentation and the Jetpack Compose: State YouTube video. These two resources explain the basic principles.