[](https://central.sonatype.com/namespace/io.github.mflisar.composedialogs)
[](https://android-arsenal.com/api?level=21)
[](https://kotlinlang.org/)
[](https://kotlinlang.org/docs/multiplatform.html)
[](LICENSE)
ComposeDialogs
A compose framework for modal dialogs.
## :heavy_check_mark: Features
This library offers you an easily extendible compose framework for modal dialogs and allows to show them as a **dialog** or a **bottom sheet**.
* with this ibrary you get a very simple way to show dialogs
* supports showing dialogs as *dialogs* or *bottom sheets*
* easily extendible - creating a new dialog is just a few lines of code
**All features are splitted into separate modules, just include the modules you want to use!**
## :camera: Screenshots
I only show the bottom sheet version for the info dialog, but of course any dialog does support the bottom sheet mode. Same holds true for the optional dialog icon.
**Info Dialog**
|  |  |  |  |
| :-: | :-: | :-: | :-: |
**Input Dialog**
|  |  |
| :-: | :-: |
**Number Dialog**
|  |  |  |
| :-: | :-: | :-: |
**Date Dialog**
|  |  |  |
| :-: | :-: | :-: |
**Time Dialog**
|  |  |
| :-: | :-: |
**Color Dialog**
|  |  |  |  |
| :-: | :-: | :-: | :-: |
**List Dialog**
|  |  |  |  |
| :-: | :-: | :-: | :-: |
|  |  |  | |
**Progress Dialog**
|  |  |
| :-: | :-: |
## :link: Dependencies
| Dependency | Version | Infos |
|:---------------------:|:-------:|:----------------------------------------------:|
| Compose Multiplatform | `1.7.0` | based on compose `1.7.1` and material3 `1.3.0` |
| Module | Dependency | Version |
|:------------------|:----------------------------------------------------|:--------|
| `core` | - | |
| `dialog-billing` | [KotBilling](https://github.com/MFlisar/KotBilling) | `0.7` |
| `dialog-color` | - | |
| `dialog-date` | - | |
| `dialog-info` | - | |
| `dialog-input` | - | |
| `dialog-list` | - | |
| `dialog-number` | - | |
| `dialog-progress` | - | |
| `dialog-time` | - | |
## :elephant: Gradle
This library is distributed via [maven central](https://central.sonatype.com/).
*build.gradle.kts*
```kts
val composedialogs = ""
// core
implementation("io.github.mflisar.composedialogs:core:$lumberjack")
// modules
implementation("io.github.mflisar.composedialogs:dialog-billing:$composedialogs")
implementation("io.github.mflisar.composedialogs:dialog-color:$composedialogs")
implementation("io.github.mflisar.composedialogs:dialog-date:$composedialogs")
implementation("io.github.mflisar.composedialogs:dialog-info:$composedialogs")
implementation("io.github.mflisar.composedialogs:dialog-input:$composedialogs")
implementation("io.github.mflisar.composedialogs:dialog-list:$composedialogs")
implementation("io.github.mflisar.composedialogs:dialog-number:$composedialogs")
implementation("io.github.mflisar.composedialogs:dialog-progress:$composedialogs")
implementation("io.github.mflisar.composedialogs:dialog-time:$composedialogs")
```
## :zap: Modules
| Module | Info | Description |
|-------------------|----------|-------------------------------------------------------|
| `core` | | the core module - must always be included |
| **Dialogs** | |
| `dialog-billing` | optional | a dialog that offers an in-app purchase list |
| `dialog-color` | optional | a color picker dialog |
| `dialog-date` | optional | a date picker dialog |
| `dialog-info` | optional | a inf dialog |
| `dialog-input` | optional | a input dialog (string and numerical) |
| `dialog-list` | optional | a list dialog (with filtering, lazy loading and more) |
| `dialog-number` | optional | a number picker dialog |
| `dialog-progress` | optional | a progress dialog |
| `dialog-time` | optional | a time picker dialog |
## Basic Usage
Simple Example
```kotlin
// create and remember a state
val state = rememberDialogState()
// show a dialog if necessary
if (state.showing)
{
DialogInfo(
state = state,
// Custom - Required
info: String,
// Custom - Optional
infoLabel: String = "",
// Base Dialog - Optional - all options can be set up with custom attributes, following are just the default examples
title: (@Composable () -> Unit)? = null,
icon: (@Composable () -> Unit)? = null,
style: DialogStyle = DialogDefaults.styleDialog(), // DialogDefaults.styleBottomSheet() => both have a few settings...
buttons: DialogButtons = DialogDefaults.buttons(),
options: Options = Options(),
onEvent: (event: DialogEvent) -> Unit = {
// optional event handler for all dialog events
}
)
}
// show the dialog inside a button press event or similar
Button(onClick = { state.show() }) {
Text("Show Dialog")
}
```
Alternatively, if you want to use one dialog with many items (e.g. for list items) you can do following:
```kotlin
// create and remember a state with data (e.g. an Integer)
val state = rememberDialogState(data = null)
// show a dialog if necessary
if (state.showing)
{
val data = state.requireData()
DialogInfo(
state = state,
// Custom - Required
info = "Data = $data"
)
}
// a list that uses the dialog
val items = 1..100
LazyColumn {
items.forEach {
item(key = it) {
Button(onClick = { state.show(it) }) {
Text("Item $it")
}
}
}
}
```
Dialog State
Check out the dialog state and the dialogs to find out what settings you can use and especially the demo app for a working example.
**Dialog State (simple with a boolean flag or complex with a data object)**
In case of the simple state `true` means that the dialog is visible and `false` that it's not. In case of the complex state holding an object means the dialog is visible and `null` means it's not visible.
```kotlin
fun rememberDialogState(
showing: Boolean = false,
buttonPositiveEnabled: Boolean = true,
buttonNegativeEnabled: Boolean = true,
dismissAllowed: Boolean = true,
swipeAllowed: Boolean = true
): DialogState
```
In case of the complex state simply use `state.show(data)` to show the dialog and then inside your dialog call `val data = state.requireData()` to get the data from the state.
**CAUTION:** the state must be saveable by `Bundle`, if it is not, provide a custom `saver`!
```kotlin
fun rememberDialogState(
data: T?,
saver: Saver, out Any> = autoSaver(),
buttonPositiveEnabled: Boolean = true,
buttonNegativeEnabled: Boolean = true,
dismissAllowed: Boolean = true,
swipeAllowed: Boolean = true
): DialogStateWithData
```
## :computer: Supported Platforms
**Supported Platforms**
This is a **KMP (kotlin multiplatform)** library and the provided modules do support following platforms:
| Modules | Android | iOS | jvm | Information |
|:---------|---------|-----|-----|-----------------------------------------------------------------------------------------|
| core | √ | √ | √ | |
| billing | √ | | | googles in-app payment is an android only thing so this library is android only as well |
| color | √ | √ | √ | |
| date | √ | √ | √ | |
| info | √ | √ | √ | |
| input | √ | √ | √ | |
| list | √ | √ | √ | |
| number | √ | √ | √ | |
| progress | √ | √ | √ | |
| time | √ | √ | √ | |
## :tada: Demo
A full [demo](demo) is included inside the demo module, it shows nearly every usage with working examples.
## :information_source: More Informations
Modules
* [Billing](readmes/dialog-billing.md)
* [Color](readmes/dialog-color.md)
* [Date](readmes/dialog-date.md)
* [Info](readmes/dialog-info.md)
* [Input](readmes/dialog-input.md)
* [List](readmes/dialog-list.md)
* [Number](readmes/dialog-number.md)
* [Progress](readmes/dialog-progress.md)
* [Time](readmes/dialog-time.md)
* [Custom](readmes/dialog-custom.md)