Guys all of you are doing great I am following kotlin multip kotlinlang #compose

Guys all of you are doing great I am following kot...

Edgar

07/19/2023, 3:00 PM

Guys all of you are doing great I am following kotlin multiplatform course when I click floating action it has to open and show bottomsheet dialog but the bottom sheet dialog shows empty white screen I want to know why my bottom sheet showing empty screen

bottomsheet.mp4

🧵 4

Stylianos Gakis

07/19/2023, 3:07 PM

Please delete this long message and instead write a short description and put the rest of the contents inside a thread. See this https://kotlinlang.slack.com/archives/CJLTWPH7S/p1616265877303000 for reference

Edgar

07/19/2023, 3:10 PM

@Stylianos Gakis done as you told me

Chrimaeon

07/19/2023, 3:15 PM

No, you haven’t - delete the code snippets from the original post an add it here in the thread please.

Edgar

07/19/2023, 3:16 PM

my ContactListScreen where I have implemented BottomSheet logic

Copy code

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ContactListScreen(
    state: ContactListState,
    newContact: Contact?,
    onEvent: (ContactListEvent) -> Unit
) {
    Scaffold(
        floatingActionButton = {
            FloatingActionButton(
                onClick = {
                    onEvent(ContactListEvent.OnAddNewContactClick)
                },
                shape = RoundedCornerShape(25.dp)
            ) {
                Icon(
                    imageVector = Icons.Rounded.PersonAdd,
                    contentDescription = "Add Contact"
                )
            }
        }
    ) {
        LazyColumn(
            modifier = Modifier.fillMaxSize(),
            contentPadding = PaddingValues(vertical = 16.dp),
            verticalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            item {
                Text(
                    text = "My Contacts (${state.contacts.size})",
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(horizontal = 16.dp),
                    fontWeight = FontWeight.Bold
                )
            }
            items(state.contacts) { contact ->
                ContactListItem(
                    contact = contact,
                    modifier = Modifier.fillMaxWidth()
                        .clickable {
                            onEvent(ContactListEvent.SelectContact(contact))

                        }
                        .padding(horizontal = 16.dp)
                )

            }
        }
    }
    AddContactSheet(
        state = state,
        newContact = newContact,
        isOpen = state.isAddContactSheetOpen,
        onEvent = onEvent,
        modifier = Modifier
        )
}

below below my AddContactSheet Screen

Copy code

package com.example.kmmcontacllistapp.contacts.presentation.components

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.rounded.Add
import androidx.compose.material.icons.rounded.Close
import androidx.compose.material3.Button
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.unit.dp
import com.example.kmmcontacllistapp.contacts.domain.Contact
import com.example.kmmcontacllistapp.contacts.presentation.BottomSheetFromWish
import com.example.kmmcontacllistapp.contacts.presentation.ContactListEvent
import com.example.kmmcontacllistapp.contacts.presentation.ContactListState

@Composable
fun AddContactSheet(
    state: ContactListState,
    newContact: Contact?,
    isOpen: Boolean,
    onEvent: (ContactListEvent) -> Unit,
    modifier: Modifier = Modifier
) {
    BottomSheetFromWish(
        visible = isOpen,
        modifier = modifier.fillMaxWidth()

    ) {
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.TopStart
        ) {
            Column(
                modifier = Modifier.fillMaxWidth(),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Spacer(Modifier.height(60.dp))
                if (newContact?.photosBytes == null) {
                    Box(
                        modifier = Modifier
                            .size(150.dp)
                            .clip(RoundedCornerShape(40))
                            .background(MaterialTheme.colorScheme.secondaryContainer)
                            .clickable {
                                onEvent(ContactListEvent.OnAddPhotoClicked)
                            }
                            .border(
                                width = 1.dp,
                                color = MaterialTheme.colorScheme.onSecondaryContainer,
                                shape = RoundedCornerShape(50.dp)
                            ),
                        contentAlignment = Alignment.Center
                    ) {
                        Icon(
                            imageVector = Icons.Rounded.Add,
                            contentDescription = "Add photo",
                            tint = MaterialTheme.colorScheme.onSecondaryContainer,
                            modifier = Modifier.size(40.dp)
                        )
                    }
                } else {
                    ContactPhoto(
                        contact = newContact,
                        modifier = Modifier
                            .size(150.dp)
                            .clickable {
                                onEvent(ContactListEvent.OnAddPhotoClicked)
                            }
                    )
                }
                Spacer(Modifier.height(16.dp))
                ContactTextField(
                    value = newContact?.firstName ?: "",
                    placeholder = "First Name",
                    error = state.firstNameError,
                    onValueChanged = {
                        onEvent(ContactListEvent.OnFirstNameChanged(it))

                    },
                    modifier = Modifier.fillMaxWidth()
                )
                Spacer(Modifier.height(16.dp))
                ContactTextField(
                    value = newContact?.lastName ?: "",
                    placeholder = "Last Name",
                    error = state.lastNameError,
                    onValueChanged = {
                        onEvent(ContactListEvent.OnLastNameChanged(it))

                    },
                    modifier = Modifier.fillMaxWidth()
                )
                Spacer(Modifier.height(16.dp))
                ContactTextField(
                    value = newContact?.email ?: "",
                    placeholder = "Email",
                    error = state.emailError,
                    onValueChanged = {
                        onEvent(ContactListEvent.OnEmailChanged(it))

                    },
                    modifier = Modifier.fillMaxWidth()
                )
                Spacer(Modifier.height(16.dp))
                ContactTextField(
                    value = newContact?.phoneNumber ?: "",
                    placeholder = "Phone Number",
                    error = state.phoneNumberError,
                    onValueChanged = {
                        onEvent(ContactListEvent.OnPhoneNumberChanged(it))

                    },
                    modifier = Modifier.fillMaxWidth()
                )
                Button(onClick = {
                    onEvent(ContactListEvent.SaveContact)
                }
                ) {
                    Text(text = "Save")
                }
            }

            IconButton(
                onClick = {
                    onEvent(ContactListEvent.DismissContact)
                }
            ) {
                Icon(
                    Icons.Rounded.Close,
                    contentDescription = "Close"
                )
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
private fun ContactTextField(
    value: String,
    placeholder: String,
    error: String?,
    onValueChanged: (String) -> Unit,
    modifier: Modifier = Modifier

) {
    Column(modifier) {
        OutlinedTextField(
            value = value,
            placeholder = {
                Text(text = placeholder)
            },
            onValueChange = onValueChanged,
            shape = RoundedCornerShape(20.dp),
            modifier = Modifier.fillMaxWidth()
        )
        if (error != null) {
            Text(
                text = error,
                color = MaterialTheme.colorScheme.error
            )
        }
    }

}

Edgar

07/19/2023, 3:18 PM

Have you seen my code

Chrimaeon

07/19/2023, 3:20 PM

Try adding a background color to your bottom sheet to see if it has the correct size. I guess it’s the

modifier.fillMaxWidth

Stylianos Gakis

07/19/2023, 3:22 PM

That’s perfect, thank you!

Edgar

07/19/2023, 3:23 PM

done as you told like this

Copy code

BottomSheetFromWish(
    visible = isOpen,
    modifier = modifier.fillMaxWidth()
        .background(MaterialTheme.colorScheme.background)

not working

Chrimaeon

07/19/2023, 3:24 PM

What is not working? 😅

Edgar

07/19/2023, 3:24 PM

it is showing white screen

Chrimaeon

07/19/2023, 3:25 PM

So, you need to use

fillMaxSize

not just fill the width.

Edgar

07/19/2023, 3:27 PM

tried both not working dont you think it is kotlin compatibility issue api level

Chrimaeon

07/19/2023, 3:29 PM

Sure, just throw some fancy words around. 😅 How’s the bottoms sheet implemented?

Edgar

07/19/2023, 3:30 PM

I am following tutorial here original code https://github.com/philipplackner/ContactsComposeMultiplatform/blob/master/shared/[…]composemultiplatform/contacts/presentation/ContactListScreen.kt

Edgar

07/19/2023, 3:33 PM

I am following video tutorial it is ended code

Chrimaeon

07/19/2023, 3:33 PM

Then check what you copied wrongly - rubber ducking your code without seeing the whole implementation will not work.

Edgar

07/19/2023, 3:33 PM

I check line by line it is not working one by one

Chrimaeon

07/19/2023, 3:34 PM

🤷‍♂️ sorry can’t help any further. Good luck 👍🏻

Edgar

07/19/2023, 3:37 PM

dont you think it is kotlin version and compose version compatibility

Chrimaeon

07/19/2023, 3:38 PM

No, then your code will not compile. Also check to use the exact same versions of each and ever dependency and plugin, the tutorial is using.

Edgar

07/19/2023, 3:49 PM

okay I will check

Chrimaeon

07/19/2023, 4:15 PM

Also, I just saw that this is a Compose Multiplattform “tutorial” and I assume you are a beginner in compose. So maybe start with the fundamentals to understand how compose works and then slowly climb up to Multiplattform.

🙌 1

Edgar

07/19/2023, 4:41 PM

I know compose it is version problem I think but I will do as you suggest

Chris Sinco [G]

07/20/2023, 3:33 AM

We may not all be familiar with the tutorial so it would also be useful to show a video or screenshot of what you expect, and what you are seeing

🙌 1

Edgar

07/20/2023, 12:22 PM

I fixed problem thank you everyone it was library compatibility issue thank you for everyone who replied and gave suggestions

8 Views

Open in Slack

Previous Next