Alert Dialog in Kotlin Compose Multiplatform KMP KMM

In today’s tutorial, we will learn how to create an Alert Dialog in Kotlin Compose Multiplatform KMP KMM for Android & iOS platforms. This is a step-by-step guide to implementing an alert dialog in a cross-platform UI, including functionality.

Alert Dialog in Kotlin Compose Multiplatform KMP KMM:

An Alert Dialog is a special type of dialog that interrupts the user flow to provide crucial information or prompt a special decision. It consists of a Title, a message, and can have one or more buttons to accept or reject a decision. Its primary purpose is to capture the mobile user’s immediate attention for a specific task.

Creating a Simple Alert Dialog:

First of all, we are creating the simplest alert dialog, which we have seen in many mobile or web applications.  This alert dialog contains a Title, description, and yes and no buttons.

Code explanation:

  1.  AlertDialog: The AlertDialog composable is used to display a standard Material Design dialog. This dialog contains a title, body text, and buttons for user interaction.
  2. onDismissRequest: This is triggered when the user dismisses the dialog (e.g., clicking outside the dialog or pressing the back button). It sets showAlertDialog to false to hide the dialog.
  3. title: A composable that displays the title of the dialog, in this case, “Important Alert”.
  4. text: A composable that displays the body text of the dialog, which informs the user that the dialog was created with Kotlin Multiplatform.
  5. onfirmButton: A button inside the dialog, which the user clicks to confirm the dialog. In this case, it closes the dialog (showAlertDialog = false) and prints “Confirmed!” in the console.
  6. dismissButton: A button that cancels the action and dismisses the dialog. It also sets showAlertDialog to false and prints “Cancelled!” to the console.
  7. remember and mutableStateOf: remember is used to store and remember a state variable across recompositions of the Composable. mutableStateOf(false) creates a mutable state variable showAlertDialog and initializes it to false. This variable is used to control the visibility of the AlertDialog. When showAlertDialog is true, the AlertDialog becomes visible.

Screenshot on an Android device:

Screenshot on an iOS device:

Creating an Alert Dialog:

We are creating an alert with only a Title text.

Screenshot on an iOS device & Android device:

Code explanation:

  1. remember and mutableStateOf: remember is used to store state across recompositions of composables, while mutableStateOf(false) initializes a mutable state variable showAlertDialog with a default value of false.
  2. showAlertDialog tracks the visibility of the custom alert dialog. When true, the dialog is shown; when false, the dialog is hidden.
  3. Dialog: Dialog is used to display a custom dialog UI. It is similar to AlertDialog but allows for more customization.
  4. onDismissRequest: This lambda is called when the dialog is dismissed. It sets showAlertDialog to false, which hides the dialog when the user clicks outside or on the back button.
  5. Box: Box is a composable that allows you to stack other composables on top of each other. It provides a flexible layout where you can use content alignment and padding effectively.
  6. fillMaxWidth(): Makes the Box take up the full available width in its parent container.
  7. height(100.dp): Sets the height of the Box to 100 dp.
  8. clip(RoundedCornerShape(16.dp)): Clips the content of the Box to have rounded corners with a radius of 16 dp.
  9. background(Color(0xFF00BFA5)): Sets the background color of the Box to a light blue color using a hex color code.
  10. padding(24.dp): Adds padding inside the Box around its child content (the Text composable).
  11. contentAlignment = Alignment.Center: Aligns the child content (the Text composable) to the center of the Box.

Alert Dialog in Kotlin Compose Multiplatform KMP KMM with Image:

1. We are creating an Alert Dialog with an Image. The image is put inside the
composeApp -> commonMain -> composeResource -> drawable folder.

Alert Dialog in Kotlin Compose Multiplatform KMP KMM

After putting the image in, make sure to sync your project.
Code for App.kt file:

Code explanation:

  1. MaterialTheme: The MaterialTheme composable applies Material Design styling to all child composables inside it. It ensures that the UI components like text, buttons, and dialogs follow the Material Design guidelines for consistent styling (colors, typography, shapes, etc.).
  2. remember and mutableStateOf: remember stores the state of showCustomAlertDialog across recompositions, preserving the value of the state variable. mutableStateOf(false) initializes the showCustomAlertDialog variable with false, meaning the dialog is initially hidden. Changing it to true will show the dialog.
  3. Column: The Column composable arranges its children vertically in a column layout.
  4. Modifiers: fillMaxSize(): Ensures that the column takes up all available space.
  5. padding(16.dp): Adds padding of 16 dp around the column for proper spacing.
  6. horizontalAlignment = Alignment.CenterHorizontally: Centers the children horizontally.
  7. verticalArrangement = Arrangement.Center: Centers the children vertically within the column.
  8. MyCustomAlertDialog: A custom composable for displaying an alert dialog. Accepts parameters to control the dialog’s visibility (showDialog), dismissal action (onDismiss), confirmation action (onConfirm), image resource (imageRes), and message text (message).
  9. Dialog: A composable that shows a modal dialog on the screen.
  10. onDismissRequest: A callback triggered when the user dismisses the dialog, either by clicking outside or pressing the back button.
  11. Surface: Surface defines the background of the dialog and handles elevation, shape, and color.
  12. fillMaxWidth(): Ensures the surface takes up the full available width.
  13. wrapContentHeight(): Makes the height of the surface adjust to fit its content.
  14. shape = RoundedCornerShape(16.dp): Rounds the corners of the dialog with a 16 dp radius.
  15. color = Color.White: Sets the background color to white.
  16. elevation = 8.dp: Adds a shadow effect with 8 dp elevation, making the dialog appear elevated above other UI elements.
  17. Image: Displays the image passed as a parameter (imageRes) in the dialog.
  18. size(100.dp): Sets the size of the image to 100 dp.
  19. clip(CircleShape): Clips the image into a circular shape using CircleShape.
  20. contentScale = ContentScale.Crop: Ensures the image is cropped to fit the circle shape.
  21. contentDescription = “Custom Alert Image”: Provides an accessibility description for the image.

Screenshot on an Android device:

Screenshot on an iOS device:

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *