Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Content in Dialog not visible

I’ve wrapped a Dialog in Compose, Android. However, things don’t seem to show up. Not sure what I need to do here, to fix this properly for it to work naturally speaking. Because, I plan on using inputs and other stuff e.g., buttons etc.

@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
@OptIn(ExperimentalComposeUiApi::class, ExperimentalMaterial3Api::class)
@Composable
fun MyDialog(
    openDialog: Boolean,
    closeDialog: () -> Unit,
) {
    if (openDialog) {
        Dialog(
            properties = DialogProperties(usePlatformDefaultWidth = false),
            onDismissRequest = closeDialog,
            content = {
                Scaffold(
                    modifier = Modifier.fillMaxSize(),
                    topBar = {
                        SmallTopAppBar(
                            modifier = Modifier.padding(0.dp, 0.dp, 16.dp, 10.dp),
                            title = {
                                Text(
                                    text = "Add new item",
                                    style = MaterialTheme.typography.titleMedium,
                                )
                            },
                            colors = TopAppBarDefaults.smallTopAppBarColors(
                                containerColor = MaterialTheme.colorScheme.background
                            ),
                            navigationIcon = {
                                IconButton(onClick = {
                                    closeDialog()
                                }) {
                                    Icon(
                                        imageVector = Icons.Filled.Close,
                                        contentDescription = null
                                    )
                                }
                            },
                            actions = {
                                Text(
                                    "Save",
                                    fontWeight = FontWeight.SemiBold
                                )
                            },
                        )
                    },
                ){
                    Text("Hello world!") // <-- Does not show up
                }
            }
        )
    }
}

Produces:

enter image description here

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

The reason is that you are ignoring the innerPadding values which comes fro Scaffold . You should be using it as the padding for your outer composable as Modifier.padding(it).

                   Text("Hello world!", modifier = Modifier.padding(it))

Above code should work . for further use Wrap the content in a container in this case Column .

val scrollState = rememberScrollState()
            Column(
                modifier = Modifier
                    .padding(it)
                    .verticalScroll(state = scrollState)
                    .fillMaxSize()
            ) {
                Text("Hello world!")
            }

to Show a dialog you do not have to pass the immutable state to Dialog composable i.e openDialog: Boolean . Here is better example how you should handle Dialog state ..

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading