Why is `Surface` as a root composable in every example? Isn’t it supposed to be some sort of `Backgr...

# compose

[ursus]

Why is Surface as a root composable in every example? Isn’t it supposed to be some sort of Background (which doesnt exist in material theme)?

(also, why not expose the BoxScope in the content lambda? Now I need to add another needless Box if I need alignment)

setContent {
    MyTheme {
        Surface(
        	modifier = Modifier.fillMaxSize(),
        	color = MaterialTheme.color.background
        ) {
        	...
        }
    }
}

[mkrussel]

Surface is used a lot, because it correctly updates composition local colors to use the correct on colors such as onPrimary and onError.

[ursus]

right, but the defaults are wrong then, default color is surfaceVariant, not background

[ursus]

I still need to apply it myself somewhere right?

[mkrussel]

With that example the everything inside the surface will default to using onBackground color until you change it or create another Surface.

[ursus]

I know, just in terms of the library, I think there is some sort of Background composable missing

[ursus]

which would then automatically pickup the MaterialTheme.colorScheme.background etc.

[mkrussel]

Seems like the different scaffolds should do something with it.

[ursus]

okay now I see it there

@Composable
fun Scaffold(
...    backgroundColor: Color = MaterialTheme.colors.background,

[ursus]

anyways, say I need a Box at the top level, to align some child to the edge, is it not wasteful to add a Box inside the Surface, when Surface is the box, but the content lambda is not BoxScope 😕

[ursus]

@mkrussel follow up question please, what if every “screen” has the same background color

Then I’d have a need to set the color just via the xml theme (windowBackground) as to reduce overdraw

It would look the same, however then the on colors wouldn’t be setup correctly as you said

any way around that?

[Filip Wiesner]

why not expose the BoxScope in the content lambda

I guess the reason is that Box is just an implementation detail and Surface is not really a layout, just a convenience wrapper for your UI that gives you some properties. Some of them are the CompositionLocal values setup.

the on colors wouldn’t be setup correctly as you said. Any way around that?

You can set them up yourself the same way Surface does.

CompositionLocalProvider(
    LocalContentColor provides contentColor
) { ... }