0

I'm new in Jetpack Compose and want to make a page that looks like this: UI

I want the page to be scrollable and 2 of the cards have a list inside.

I've tried to use a list of cards inside a scrollable column and I use another column inside the card. I got an error because of it (obviously) that says this:

Vertically scrollable component was measured with an infinity maximum height constraints, which is disallowed. One of the common reasons is nesting layouts like LazyColumn and Column(Modifier.verticalScroll())...

My approach that made this error was this:

@Composable
fun RecipeDetailsApp() {
    val data = dummyRecipes[0]
    
    Box(
        contentAlignment = Alignment.TopCenter,
        modifier = Modifier
            .verticalScroll(rememberScrollState())
    ) {
        Header(photoUrl = data.photoUrl)
        Column(
            modifier = Modifier
                .padding(horizontal = 16.dp)
                .offset(y = 170.dp),
            verticalArrangement = Arrangement.spacedBy(16.dp),
        ) {
            TitleRow(data)
            NutritionFactsRow(data = data.nutrition)
            IngredientsRow(data.ingredients)
        }
    }
}

@Composable
fun IngredientsRow(ingredients: List<String>) {
    ElevatedCard(
        modifier = Modifier
            .fillMaxWidth(),
        colors = CardDefaults.elevatedCardColors(
            containerColor = MaterialTheme.colorScheme.background
        ),
    ) {
        Column(
            modifier = Modifier
                .padding(horizontal = 24.dp, vertical = 16.dp)
                .fillMaxWidth()
        ) {
            SectionText(title = "Ingredients", modifier = Modifier)
            for(item in ingredients) {
                Text(
                    text = item,
                    modifier = Modifier
                        .padding(top = 8.dp)
                        .fillMaxWidth(),
                    style = MaterialTheme.typography.bodyMedium
                )
            }
        }
    }
}

I got an idea to divide the card into three parts (top, content, and bottom). It looks like this: Divided Card

Is it correct or is there another approach to this problem? Thank you in advance!

DuffAldri
  • 1

2 Answers2

0

Yes LazyColumn & verticalScroll() you can not use simultaneously in one view.

Check this link: https://stackoverflow.com/a/75360818/17682395

I think it will give you some idea about how to manage scrollable view in your UI.

Heet Changela
  • 565
  • 1
  • 11
0

You can try adding a .height() attribute to any of the parent modifiers. or check out flowRow and flow column here

Dhanush Raja
  • 308
  • 1
  • 2
  • 8