while using ModalBottomSheetLayout, how to make background and status bar transparent in Jetpack compose

Issue

I am new to jetpack. My app is having ModalBottomSheetLayout in MainScreen. Now when I click on button of MainScreen, it shows BottomSheet. When bottom sheet is open, the background is transparent but status bar is not. How to make it transparent?

Solution

So far, you can use the System UI Controller in the accompanist library to control the statusBar Color and navigationBar color

implementation "com.google.accompanist:accompanist-systemuicontroller:0.18.0"

// Remember a SystemUiController
val systemUiController = rememberSystemUiController()
val useDarkIcons = MaterialTheme.colors.isLight

SideEffect {
    // Update all of the system bar colors to be transparent, and use
    // dark icons if we're in light theme
    systemUiController.setSystemBarsColor(
        color = Color.Transparent,
        darkIcons = useDarkIcons
    )

    // setStatusBarsColor() and setNavigationBarsColor() also exist
}

Answered By - Afterglow