I've been trying to do something that I thought was going to be simple. I want to make a material ca...

# compose

[Neal Sanche]

I've been trying to do something that I thought was going to be simple. I want to make a material card with a text inside it that fills the width of the screen. All I can do is making it look like it's wrapping content. Code is so far like this:

@Preview
@Composable
fun MainScreen() {
    MaterialTheme {
        Row(mainAxisSize = LayoutSize.Expand) {
            Greeting("Android")
        }
    }
}

@Composable
fun Greeting(name: String) {
    Card(shape = RoundedCornerShape(4.dp), elevation = 10.dp) {
        Text(text = "Yo $name!", style = +themeTextStyle { button })
    }
}

and my preview looks like:

[Neal Sanche]

Card doesn't have layout modifiers. Putting a Container around it, or inside it, doesn't seem to make a difference here. Tried making a Column around the Greeting, a Container around the greeting. I guess I'm just missing something here.

[Louis Pullen-Freilich [G]]

I think the problem is inside Greeting, Card will just wrap its child by default - so you want the inside of the Card to be expanded, you can try wrapping the Text in a container and making it expanded

[Luca Nicoletti]

Yep, card will wrap on its content

[Neal Sanche]

I tried wrapping Text in a Container with expanded = true and this expands in height, but the card is only as wide as the text.

[Luca Nicoletti]

Give me a sec

[Mihai Hrincescu]

Untitled.kt

[Mihai Hrincescu]

My guess is that you cannot fill on main axis in row and column since it would go to infinity.

[Luca Nicoletti]

Should keep in consideration the size of parent

[Neal Sanche]

Thanks @Mihai Hrincescu definitely going to be tricky to wrap my head around crossAxis* and mainAxis* for Column and Row. Now that I know to use Column and not Row for this, I guess I can move forward. Thanks.

[Mihai Hrincescu]

You can also use FlexRow like this:

Sample.kt

[Luca Nicoletti]

From this thread: https://kotlinlang.slack.com/archives/CJLTWPH7S/p1571428359169900 FlexRow and FlexColumn will soon go away