Alert dialog

@Composable
fun DialogEx() {
  var openDialog by remember { mutableStateOf(false) }
  var counter by remember { mutableIntStateOf(0) }

  Column {
    Button(onClick = { openDialog = true }) {
      Text(text = "Open dialog")
    }
    Text(text = "Counter: $counter")
  }

  if (openDialog) {
    AlertDialog(
      onDismissRequest = {
      	// dialog 바깥 공간 터치 시 dialog 꺼짐 처리
        openDialog = false
      },
      confirmButton = {
        Button(onClick = {
          openDialog = false
          counter++
        }) {
          Text(text = "Plus")
        }
      },
      dismissButton = {
        Button(onClick = { openDialog = false }) {
          Text(text = "Cancel")
        }
      },
      title = {
        Text(text = "Counter Dialog")
      },
      text = {
        Text(text = "Press Plus button")
      },
    )
  }
}

• Main
  

• Alert dialog
  

Cusotm dialog

@Composable
fun CustomDialog() {
  var openDialog by remember { mutableStateOf(false) }
  var counter by remember { mutableIntStateOf(0) }

  Column {
    Button(onClick = { openDialog = true }) {
      Text(text = "Open dialog")
    }
    Text(text = "Counter: $counter")
  }

  if (openDialog) {
    Dialog(
      onDismissRequest = {
        // dialog 바깥 공간 터치 시 dialog 꺼짐 처리
        openDialog = false
      }
    ) {
      // Surface 처리하지 않으면 Dialog 안에 있는 content까지 dim 효과 나타남
      Surface {
        Column(modifier = Modifier.padding(8.dp)) {
          Text(text = "Press +1 button : increase value\nPress -1 button : subtract value")
          Row(modifier = Modifier.align(Alignment.End)) {
            Button(onClick = { openDialog = false }) {
              Text(text = "Cancel")
            }

            Button(onClick = {
              openDialog = false
              counter++
            }) {
              Text(text = "+1")
            }

            Button(onClick = {
              openDialog = false
              counter-- }
            ) {
              Text(text = "-1")
            }
          }
        }
      }
    }
  }
}

• Custom dialog