How to paint over safe area in jetpack compose?

Question

I am trying to paint that dark blue area with the gradient as well.

.

I am basically looking for ignoreSafeArea (iOS SwiftUI)

Equivalent for Jetpack Compose. I could try painting that bar the same shade of blue I used for my gradient but I don't think that is the best solution.

I have tried changing the appBar color but the result is not what I am looking for.

Answer 1

This bar is the Android Status Bar.
To change its color in Jetpack Compose you can use the Google Accompanist library, specifically the System UI Controller.

System UI Controller provides easy-to-use utilities for updating the System UI bar colors within Jetpack Compose.

Specifically the setSystemBarsColor or setStatusBarColor functions.

systemUiController.setStatusBarsColor(
    color = Color.Transparent, //set your color here
    darkIcons = true
)

Then, to draw under the status bar area you can use the WindowCompat in your MainActivity

WindowCompat.setDecorFitsSystemWindows(window, false)

setContent {
    MyApp(
      ...
    )
}

To prevent content (like AppBar) from going under system icons I used Inset-aware layouts by setting a Box with top padding passed from Accompanist Scaffold.

Box(Modifier.padding(top = contentPadding.calculateTopPadding())) {
   // my app content
}