hey, what would be the best approach to guarantee ...

# compose

[fabio.carballo]

hey, what would be the best approach to guarantee that any children that I define are always expanded to match the full width?

I wanted to achieve something like this:

VerticalButtonContainer(
    top = {
         TertiaryButton(
            text = "Tertiary",
            onClick = { },
          )
     },
     bottom = {
          PrimaryButton(
              text = "Primary",
              onClick = {},
          )
     }
)

@Composable
fun VerticalButtonContainer(
    top: @Composable () -> Unit,
    bottom: @Composable () -> Unit
) {
    Column(
        Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {

        top()
        Spacer(Modifier.height(16.dp))
        bottom()
    }
}

In this case both top and bottom would ideally expand to the max width of the container. However (naturally) the buttons are still wrapping the content. Any way I can tweak the internals of this VerticalButtonContainer to force the children to expand the width?

[Adriano Celentano]

I just started with compose, so very unconfident about this solution

@Composable
private fun Sample() {
    VerticalButtonContainer(
        top = {
            Button(
                modifier = it.background(color = Color.Green),
                onClick = {}
            ) {
                Text(text = "test")
            }
        },
        bottom = {
            Button(
                modifier = it.background(color = Color.Green),
                onClick = {}
            ) {
                Text(text = "test")
            }
        }
    )
}

@Composable
fun VerticalButtonContainer(
    top: @Composable (modifier: Modifier) -> Unit,
    bottom: @Composable (modifier: Modifier) -> Unit
) {
    Column(
        Modifier
            .fillMaxSize()
    ) {
        top(Modifier.fillMaxWidth())
        Spacer(Modifier.height(16.dp))
        bottom(Modifier.fillMaxWidth())
    }
}

[Adriano Celentano]

Passing the modifier like this is maybe not a good idea.
I guess more ideal would be a custom layout
https://developer.android.com/jetpack/compose/layout#custom-layouts

[fabio.carballo]

thanks, I also woke up with the same idea as you! will have to give it a shot with custom layouts later