Hello :wave: , I want to change the ui on button c...

# compose

[KotlinLeaner]

Hello 👋 , I want to change the ui on button click so I am using ui event. I tried some code and it's working fine. I want to check some variable value so I created a LaunchEffect to trigger and print the value in log. After using LaunchEffect my view is not changing anymore i.e. it stucks on same screen. I have one screen where I am using HorizontalPager and other screen just printing the value in Text.

[KotlinLeaner]

SaveVariable

@Composable
@OptIn(ExperimentalFoundationApi::class)
fun SaveVariable() {
    val viewModel = VariableViewModel()
    val pagerState = rememberPagerState()
    LaunchedEffect(key1 = pagerState) {
        snapshotFlow { pagerState.currentPage }.collect { page ->
            viewModel.currentIndex = page
        }
    }
//    this code is causing issue
//    LaunchedEffect(key1 = viewModel.setLastCurrentPage) {
//        Log.e(">> LaunchedEffect", "${viewModel.currentIndex}")
//    }
    LgcTheme {
        SaveVariableItem(viewModel.currentIndex, viewModel.uiState, pagerState) {
            viewModel.changeUIi()
            viewModel.setLastCurrentPage = true
        }
    }
}

VariableViewModel

class VariableViewModel : ViewModel() {
    var uiState by mutableStateOf(ScreenName.FIRST)
    var setLastCurrentPage by mutableStateOf(false)
    var currentIndex by mutableStateOf(0)
    fun changeUIi() {
        uiState = if (uiState == ScreenName.FIRST) {
            ScreenName.SECOND
        } else {
            ScreenName.FIRST
        }
    }
}

ScreenName

enum class ScreenName {
    FIRST,
    SECOND
}

SaveVariableItem

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun SaveVariableItem(
    currentIndex: Int,
    uiState: ScreenName,
    pagerState: PagerState,
    changeUiState: () -> Unit,
) {
    Column {
        when (uiState) {
            ScreenName.FIRST -> {
                ScreenFirstView(pagerState)
            }

            ScreenName.SECOND -> {
                ScreenSecondView(currentIndex, "SECOND")
            }
        }
        Button(onClick = { changeUiState() }) {
            Text(text = "Add")
        }
    }
}

ScreenFirstView

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ScreenFirstView(pagerState: PagerState) {
    Column(
        modifier = Modifier
            .wrapContentSize()
            .background(Color.Black)
    ) {
        HorizontalPager(
            modifier = Modifier.padding(20.dp),
            pageCount = 10,
            state = pagerState
        ) { page ->
            Text(
                text = "Page: $page",
                modifier = Modifier.fillMaxWidth(),
                color = Color.White
            )
        }
    }
}

ScreenSecondView

@Composable
fun ScreenSecondView(currentIndex: Int, screenImage: String) {
    Column(
        modifier = Modifier
            .wrapContentSize()
            .background(Color.Black)
    ) {
        Text(text = "$currentIndex ==== $screenImage", color = Color.White)
    }
}

I don't understand why this piece of code is causing issue to unable to change the ui code

LaunchedEffect(key1 = viewModel.setLastCurrentPage) {
    Log.e(">> LaunchedEffect", "${viewModel.currentIndex}")
}

Please guide me what I am doing wrong in here. Thanks

[Chrimaeon]

On ever composition of the SaveVariable you create a new view model. That might be the issue 😉