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
}