IssueTracker

Jetpack Compose version: 1.8.0-beta02

Jetpack Compose component used: graphicsLayer, material3.Button with ButtonShapes, derivedStateOf

Android Studio Build: #IU-243.22562.218

Kotlin version: 2.1.10

First of all, I apologize if I selected the issue component incorrectly. There are multiple Compose components used, so I'm not sure what's the actual cause.

Run the following code and press the "Go back" button. Observe the screen flickering. Sometimes it's necessary to rerun the app and try one more time to reproduce the issue. Also see the attached video.

If you check the comments in the code, EITHER removing movableContentOf, replacing Modifier.graphicsLayer { alpha = ... } with Modifier.alpha(...) or removing the Button(shapes = ...) argument fixes the issue.

import androidx.compose.animation.core.Animatable
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonShapes
import androidx.compose.material3.IconButtonDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
import kotlinx.coroutines.launch

@Composable
fun App() {
    val animatable = remember { Animatable(initialValue = 1F) }

    // Swapping the following two lines fixes the issue
    val progress by remember { derivedStateOf { animatable.value } }
//    val progress = animatable.value

    var showA by remember { mutableStateOf(false) }
    var showB by remember { mutableStateOf(true) }
    val isAnimating = showA && showB
    val scope = rememberCoroutineScope()

    Box(modifier = Modifier.fillMaxSize()) {
        if (showA) {
            Box {
                Screen(buttonText = "Hello", color = Color.Yellow)
            }
        }

        if (showB) {
            Box(
                // Swapping the following two lines fixes the issue
                modifier = if (isAnimating) Modifier.graphicsLayer { alpha = progress } else Modifier,
//                modifier = if (isAnimating) Modifier.alpha(progress) else Modifier,
            ) {
                Screen(
                    buttonText = "Go back",
                    color = Color.Blue,
                    onClick = {
                        scope.launch {
                            showA = true
                            animatable.animateTo(targetValue = 0F, animationSpec = tween(1000))
                            showB = false
                        }
                    },
                )
            }
        }
    }
}

@Composable
fun Screen(buttonText: String, color: Color, onClick: () -> Unit = {}) {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(color),
        contentAlignment = Alignment.Center
    ) {
        Button(
            // Removing this `shapes` argument fixes the issue
            shapes = ButtonShapes(
                shape = CircleShape,
                pressedShape = IconButtonDefaults.smallPressedShape,
            ),
            onClick = onClick,
        ) {
            Text(buttonText)
        }
    }
}