add scroll - jetpack compose - kotlin

Question

I need to add a scroll to a page.
but i get this error: Vertically scrollable component was measured with an infinity maximum height constraints, which is disallowed.
I do have Lazy Column inside a big column.. and I think that is the problem.
but i need the whole page to scroll.
here is my code:
#Composable
fun ContactDetails(contactViewModel: ContactViewModel, contactId: String?) {
val contact = contactViewModel.getContactById(contactId)
val optionsScrollState = rememberScrollState()
Column(
modifier = Modifier
.fillMaxWidth()
.verticalScroll(state = optionsScrollState),
horizontalAlignment = Alignment.Start
) {
Row(
modifier = Modifier
.fillMaxWidth()
.height(350.dp)
) {
Card(modifier = Modifier.fillMaxWidth()) {
if (contact[0].image != null) {
Image(
painter = rememberImagePainter(data = contact[0].image),
contentDescription = "Image",
modifier = Modifier.fillMaxWidth(),
contentScale = ContentScale.Crop
)
} else {
Box(
modifier = Modifier
.fillMaxHeight()
.fillMaxWidth()
.background(color = Color.Magenta),
contentAlignment = Alignment.Center,
) {
Text(
text = contact[0].first_name[0].toString(),
fontSize = 26.sp,
fontWeight = FontWeight.Bold
)
}
}
Box(
modifier = Modifier
.fillMaxWidth()
.fillMaxHeight(),
contentAlignment = Alignment.BottomStart
) {
Text(
text = "${contact.first().first_name} ${contact.first().last_name}",
modifier = Modifier,
color = Color.White,
style = MaterialTheme.typography.h4,
fontWeight = FontWeight.Bold
)
}
}
}
Divider(
color = Color.LightGray,
thickness = 2.dp,
)
phoneCard(contact = contact.first(), contactViewModel)
emailCard(contact = contact.first(), contactViewModel)
}
}
#Composable
fun phoneCard(contact: Contact, contactViewModel: ContactViewModel) {
val phoneList = contactViewModel.getPhoneListByContactId(contact.id)
Row(modifier = Modifier.padding(10.dp)) {
Icon(imageVector = Icons.Default.Phone, contentDescription = "Phone Icon")
Text(
text = "Phone:",
modifier = Modifier.padding(start = 10.dp),
textAlign = TextAlign.Center,
style = MaterialTheme.typography.h6,
fontWeight = FontWeight.Bold
)
}
LazyColumn {
items(items = phoneList) {
Row(modifier = Modifier.padding(10.dp)) {
Text(text = it.type + ": ", fontWeight = FontWeight.Bold)
Text(text = it.number)
}
}
}
}
#Composable
fun emailCard(contact: Contact, contactViewModel: ContactViewModel) {
val emailList = contactViewModel.getEmailListByContactId(contact.id)
Row(modifier = Modifier.padding(10.dp)) {
Icon(imageVector = Icons.Default.Email, contentDescription = "Email Icon")
Text(
text = "Email:",
modifier = Modifier.padding(start = 10.dp),
textAlign = TextAlign.Center,
style = MaterialTheme.typography.h6,
fontWeight = FontWeight.Bold
)
}
LazyColumn {
items(items = emailList) {
Row(modifier = Modifier.padding(10.dp)) {
Text(text = it.type + ": ", fontWeight = FontWeight.Bold)
Text(text = it.address)
}
}
}
}
here is my emulator:
my description page

Answer 1

Specify a height in your LazyColumns for example:
LazyColumn(
modifier = Modifier
.fillMaxWidth()
.height(50.dp)
) {