Android Jetpack Compose: All row items not rendering on smaller screens

Question

I'm still getting the hang of Android's Jetpack Compose declarative UI library and would appreciate some help. The column (containing an image "icon" and text) isn't rendering at all on smaller screens. Here is the relevant code -->

@Composable
fun ComposableExample() {
...
ScrollableColumn(modifier = Modifier.fillMaxWidth()) {
    // Scrollable column should have one child.
    Column {
        
        Row(
            modifier = Modifier.fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically,
        ) {
            
            Text(text = "This is the Title of the Video")
            
            //--------- This column is rendering on wider (tablet+) screens but not phone sized screens.
            Column(horizontalAlignment = Alignment.CenterHorizontally,
                modifier = Modifier.fillMaxWidth()) {
                Image(imageResource(id = R.drawable.icon_download_arrow),
                    modifier = Modifier.preferredSize(20.dp)
                        .clickable(onClick = { }))
                Text(text = "Download")
            }
            // ---------
            
        }
            ...
    }
}
}

I've tried a ton of different modifiers/permutations and can't get the column to render on smaller screens. I'd really appreciate some help, thanks!

question from:https://stackoverflow.com/questions/65875034/android-jetpack-compose-all-row-items-not-rendering-on-smaller-screens

Answer 1

Simply swapping the column and the text is working, i.e. rendering the the clickable column of icon image and text BEFORE the video title. Not entirely sure why this is working, but it is!