Jetpack compose: scrolling in dialog gives strange effects

user_873406 0
Viewed 212

I'm trying to create a dialog where you can pick a number. I use FlowRow from Accompanist. But it gives strange results when scrolling. I guess that I'm missing something here.

The code:

@Composable
fun AlertDialogErrorTest() {
    var showDlg by remember { mutableStateOf(false)}
    val scrollState = rememberScrollState()
    if (showDlg) {
        AlertDialog(
            onDismissRequest = { showDlg = false },
            title = { Text(text = "Pick something from the list") },
            text = {
                   FlowRow(modifier = Modifier.verticalScroll(scrollState)) {
                       for (i in 1..100) {
                           Box (modifier = Modifier.size(48.dp).padding(8.dp).background(Color.LightGray), contentAlignment = Alignment.Center) {
                               Text (i.toString())
                           }
                       }
                   }
            },
            confirmButton = {
                TextButton(onClick = { showDlg = false }) {
                        Text("Done")
                    }
            },
            dismissButton = {
                TextButton(onClick = { showDlg = false }) {
                        Text("Cancel")
                    }
            }
        )
    }

    Button(onClick = {showDlg = true}) {
        Text("Show dialog")
    }
}

The result when scrolling:

android-jetpack-compose kotlin
2 Answers

This is because AlertDialog does not currently support scrollable content. If you think this is a bug, you can report it in the Compose issue tracker.

Meanwhile, you can use a plain Dialog, which lays under the AlertDialog.

Dialog(
    onDismissRequest = { showDlg = false },
    content = {
        Column(Modifier.background(Color.White)) {
            Text(
                text = "Pick something from the list",
                style = MaterialTheme.typography.subtitle1,
                modifier = Modifier.align(Alignment.CenterHorizontally)
            )
            FlowRow(
                modifier = Modifier
                    .verticalScroll(scrollState)
                    .weight(1f)
            ) {
                for (i in 1..100) {
                    Box(
                        modifier = Modifier
                            .size(48.dp)
                            .padding(8.dp)
                            .background(Color.LightGray),
                        contentAlignment = Alignment.Center
                    ) {
                        Text(i.toString())
                    }
                }
            }
            FlowRow(
                mainAxisSpacing = 8.dp,
                crossAxisSpacing = 12.dp,
                modifier = Modifier
                    .align(Alignment.End)
                    .padding(horizontal = 8.dp, vertical = 2.dp)
            ) {
                TextButton(onClick = { showDlg = false }) {
                    Text("Cancel")
                }
                TextButton(onClick = { showDlg = false }) {
                    Text("Done")
                }
            }
        }
    },
)

Result:

user_35857960

I have faced the same issue, and the work around is to pass null in both title , and text, and to put the whole content in the buttons, you might check the below example, and please forgive my naming :).

AlertDialog(
    onDismissRequest = {
        state.onDismiss(state.data)
    },
    title = null,
    text = null,
    buttons = {
        Column {
            val expandedState =
                state.data.expandedState
            expandedState?.let {
                RenderFieldPerCorrespondingState(it.title)
                LazyColumnViewGroupComposable(
                    viewGroupState = it.itemsState,
                    scrollTo = scrollTo
                )
                ViewGroupComposable(viewGroupState = it.actionsState)
            }
        }
    }
)
user_24905940
Related