Android LazyColumn crashing, not showing all results

54 views Asked by At

I have the code below. However, the dish list has six entries. When I run the app, I get three dishes (with their images), which I can scroll through, and if I scroll further, the app crashes before I can see the fourth.

In the MenuDish function, the row is for each dish, each of which has three Texts and an image.

The WeeklySpecial Composable just writes out the phrase Weekly Special.

I included state = rememberLazyListState() in my LazyColumn argument, but I'm not sure if it's necessary.

For what it's worth, when I set the Column Composable's fillMaxWidth to 0.75f and the second Text Composable's fillMaxWidth to 1f, then all 6 dishes appear, but then all the images are gone. I'd like all three texts and the images for all six dishes to appear when running the app.

package com.example.littlelemon

import android.util.Log
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import androidx.navigation.NavHostController

@Composable
fun LowerPanel(navController: NavHostController, dishes: List<Dish> = listOf()) {
    Column {
        WeeklySpecialCard()
        LazyColumn(state = rememberLazyListState()) {
            itemsIndexed(dishes) {_, dish ->
                MenuDish(navController, dish)
            }
        }
    }
}

@Composable
fun WeeklySpecialCard() {
    Card(
        modifier = Modifier
            .fillMaxWidth()
    ) {
        Text(
            text = stringResource(R.string.weekly_special),
            style = MaterialTheme.typography.h5,
            modifier = Modifier
                .padding(8.dp)
        )
    }
}

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun MenuDish(navController: NavHostController? = null, dish: Dish) {
    Card(onClick = {
        Log.d("AAA", "Click ${dish.id}")
        navController?.navigate(DishDetails.route + "/${dish.id}")
    }) {
        //TODO: Insert code here
        Row(modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp)) {
                Column {
                    Text(dish.name, style = MaterialTheme.typography.h6)
                    Text(
                        dish.description,
                        style = MaterialTheme.typography.body2,
                        modifier = Modifier.fillMaxWidth(.75f).padding(top = 5.dp, bottom = 5.dp)
                    )
                    Text("${dish.price}", style = MaterialTheme.typography.body2)
                }

                Image(painter = painterResource(id = dish.imageResource),
                contentDescription = "Image",
                modifier = Modifier.clip(RoundedCornerShape(10.dp)))

        }
    }
    Divider(
        modifier = Modifier.padding(start = 8.dp, end = 8.dp),
        thickness = 1.dp,
    )
}
0

There are 0 answers