Custom Navigation Flow with BottomSheet and Fullscreen Transitions

[winkleak]

2_5368569361764216888.mp4

I needed to implement a specific navigation flow in my app and couldn't find an out-of-the-box solution, so I built a custom one. The flow includes three screens:

1. Screen A opens a BottomSheet with Screen B inside it.

2. On Screen B, clicking a button navigates to Screen C, which:

Fully covers both previous screens (including the BottomSheet),

Cannot be dismissed by swiping down like a regular BottomSheet,

Opens with a smooth transition animation.

3. When Screen C is closed (e.g. via back button), the BottomSheet with Screen B should either:

Immediately reappear, or

Animate back in from the bottom.

I used some sample projects as a reference and managed to get this behavior working. The code and demo video are included.

However, the current implementation feels a bit complex, and I believe there must be a simpler or more idiomatic way to achieve the same result—perhaps using better navigation abstractions or state handling.

If you have suggestions or ideas on how to simplify or improve this pattern, I'd love to hear them!

class ProfileScreen : Screen {

    @Composable
    override fun Content() {
        BottomSheetNavigator(
            sheetShape = RoundedCornerShape(topStart = 24.dp, topEnd = 24.dp),
            sheetBackgroundColor = Color.White,
            modifier = Modifier.fillMaxSize(),
            skipHalfExpanded = true
        ) {
            ProfileContent()
        }
    }

    @Composable
    private fun ProfileContent() {
        val bottomSheetNavigator = LocalBottomSheetNavigator.current

        var showSettings by rememberSaveable { mutableStateOf(false) }

        LaunchedEffect(showSettings) {
            if (showSettings) {
                bottomSheetNavigator.show(SettingsScreen())
            }
        }

        LaunchedEffect(Unit) {
            snapshotFlow { bottomSheetNavigator.isVisible }
                .collect { isVisible ->
                    if (!isVisible && showSettings) {
                        showSettings = false
                    }
                }
        }

        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(Color(0xFFE0F7FA)),
            contentAlignment = Alignment.Center
        ) {
            Column(horizontalAlignment = Alignment.CenterHorizontally) {
                Text("Profile screen", style = MaterialTheme.typography.h5)
                Spacer(modifier = Modifier.height(16.dp))
                Button(onClick = { showSettings = true }) {
                    Text("Settings")
                }
            }
        }
    }
}

class SettingsScreen() : Screen {

    @Composable
    override fun Content() {
        val navigator = LocalNavigator.currentOrThrow

        Box(
            modifier = Modifier
                .fillMaxWidth()
                .fillMaxHeight(0.9f),
            contentAlignment = Alignment.Center
        ) {
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center,
                modifier = Modifier.padding(24.dp)
            ) {
                Text("Settings", style = MaterialTheme.typography.h6)
                Spacer(Modifier.height(24.dp))
                Button(onClick = {
                    navigator.parent?.push(OptionsScreen())
                }) {
                    Text("Options")
                }
            }
        }
    }
}

class OptionsScreen : Screen, ScreenTransition by SlideTransition() {

    @Composable
    override fun Content() {
        val navigator = LocalNavigator.currentOrThrow

        Scaffold(
            topBar = {
                TopAppBar(
                    title = { Text("Options") },
                    navigationIcon = {
                        IconButton(onClick = { navigator.pop() }) {
                            Icon(Icons.Default.ArrowBack, contentDescription = null)
                        }
                    }
                )
            }
        ) { padding ->
            Box(
                Modifier
                    .padding(padding)
                    .fillMaxSize(),
                contentAlignment = Alignment.Center
            ) {
                Text("Options Screen")
            }
        }
    }
}

class ProfileActivity : ComponentActivity() {

    @OptIn(ExperimentalMaterialApi::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            Navigator(ProfileScreen()) {
                ScreenTransition(
                    navigator = it,
                    defaultTransition = SlideTransition(),
                    disposeScreenAfterTransitionEnd = true
                )
            }
        }
    }
}