I’m learning Jetpack Compose and I’m having a bit of a problem reflecting the changes of this var, “repeticiones” (repetitions):
var repeticiones by remember { mutableIntStateOf(3) }
The var is used like this:

Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center) {
                Text(
                    text = stringResource(R.string.repeticiones),
                    fontSize = 30.sp,
                    textAlign = TextAlign.Center
                )
                Spacer(modifier = Modifier.width(8.dp))
                Text(
                    text = repeticiones.toString(),
                    fontWeight = FontWeight.Bold,
                    fontSize = 40.sp,
                    textAlign = TextAlign.Center
                )
            }

The output on the screen would be something like this: “Repeticiones: N” where repetitions equals N. I give the var its real value in this block of code:

val person by workoutViewModel.person.observeAsState()
var repeticiones by remember {
        mutableIntStateOf(3)
    }
val coroutineScope = rememberCoroutineScope()
var parar by rememberSaveable {
       mutableStateOf(false)
    }

person?.let {data->
        name = data.name
        repeticiones = data.repeticiones
    }

The screen does indeed reflect the data from the ViewModel, but somehow it does not reflect the changes im trying to apply here:

var parar by rememberSaveable {
        mutableStateOf(false)
    }
Button(
                onClick = {
                    coroutineScope.launch {
                        while (repeticiones > 0) {
                            delay(200)
                            if (parar) {
                                break
                            }
                            workoutViewModel.restarRepeticion()
                        }
                    }
                }
            ) {
                Text(
                    text = stringResource(R.string.btn_comenzar)
                )
            }
Spacer(modifier = Modifier.height(20.dp))
            Button(
                onClick = {
                    parar = true
                }
            ) {
                Text(
                    text = stringResource(R.string.btn_parar)
                )
            }

As you can see, the idea is to use two buttons. The first one would start a countdown, bringing repetitions to zero (the method workoutViewModel.restarRepeticion() just substracts 1 from the var), this countdown could only be stopped by the second one, which would set “parar” (stop) to true and would trigger the break condition in the first button. For some reason im not seeing any changes. Here’s the full code in case there’s something I have overlooked:

package com.example.workoutpila.ui.screens

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material3.BottomAppBar
import androidx.compose.material3.Button
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.livedata.observeAsState
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavController
import com.example.workoutpila.viewmodel.WorkoutViewModel
import com.example.workoutpila.R
import androidx.compose.runtime.*
import androidx.compose.ui.res.painterResource
import com.example.workoutpila.navigation.Routes
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch

@Composable
fun WorkoutScreen(navController: NavController, workoutViewModel: WorkoutViewModel){

    val person by workoutViewModel.person.observeAsState()
    var name by remember {
        mutableStateOf("Cargando...")
    }
    var repeticiones by remember {
        mutableIntStateOf(3)
    }
    val coroutineScope = rememberCoroutineScope()
    var parar by rememberSaveable {
        mutableStateOf(false)
    }

    person?.let {data->
        name = data.name
        repeticiones = data.repeticiones
    }
    Scaffold(
        bottomBar = {
            BottomAppBar(
                modifier = Modifier.fillMaxWidth()
            ) {
                IconButton(
                    onClick = {
                        navController.navigate(Routes.MainScreen.route)
                    },
                    modifier = Modifier.fillMaxWidth()
                ) {
                    Row(modifier = Modifier.fillMaxWidth()) {
                        Icon(imageVector = Icons.Default.ArrowBack, contentDescription = "Back")
                        Spacer(modifier = Modifier.width(20.dp))
                        Text(text = stringResource(R.string.btn_volver))
                    }
                }
            }
        }

    ) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(it)
                .background(MaterialTheme.colorScheme.background),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(10.dp)
            ) {
                Text(
                    text = stringResource(R.string.frase_workout) + " $name",
                    fontWeight = FontWeight.Bold,
                    fontSize = 40.sp,
                    textAlign = TextAlign.Center
                )


            }
            Spacer(modifier = Modifier.height(40.dp))
            Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center) {
                Text(
                    text = stringResource(R.string.repeticiones),
                    fontSize = 30.sp,
                    textAlign = TextAlign.Center
                )
                Spacer(modifier = Modifier.width(8.dp))
                Text(
                    text = repeticiones.toString(),
                    fontWeight = FontWeight.Bold,
                    fontSize = 40.sp,
                    textAlign = TextAlign.Center
                )
            }
            Spacer(modifier = Modifier.height(20.dp))
            Image(
                painter = painterResource(R.drawable.workout_img),
                contentDescription = "Workout",
                modifier = Modifier.size(300.dp)
            )
            Spacer(modifier = Modifier.height(20.dp))
            Button(
                onClick = {
                    coroutineScope.launch {
                        while (repeticiones > 0) {
                            delay(200)
                            if (parar) {
                                break
                            }
                            workoutViewModel.restarRepeticion()
                        }
                    }
                }
            ) {
                Text(
                    text = stringResource(R.string.btn_comenzar)
                )
            }
            Spacer(modifier = Modifier.height(20.dp))
            Button(
                onClick = {
                    parar = true
                }
            ) {
                Text(
                    text = stringResource(R.string.btn_parar)
                )
            }
        }
    }
}

Thank you for your time.

I have even tried without coroutine to check if that was the issue:

onClick = {
                    workoutViewModel.restarRepeticion()
                }

But it still doesn’t reflect on the screen.