ComposeDialogs

This library offers you an easily extendible compose framework for modal dialogs and allows to show them as a dialog, bottom sheet or even as full screen dialog.

Note

All features are splitted into separate modules, just include the modules you want to use!

Table of Contents

• Screenshots
• Supported Platforms
• Versions
• Setup
• Usage
• Modules
• Demo
• More
• API
• Other Libraries

📷 Screenshots

color

date

frequency

info

input

list

menu

number

progress

time

💻 Supported Platforms

Module	android	iOS	windows	wasm
core	✅	✅	✅	✅
dialog-color	✅	✅	✅	✅
dialog-date	✅	✅	✅	✅
dialog-info	✅	✅	✅	✅
dialog-input	✅	✅	✅	✅
dialog-list	✅	✅	✅	✅
dialog-menu	✅	✅	✅	✅
dialog-number	✅	✅	✅	✅
dialog-progress	✅	✅	✅	✅
dialog-time	✅	✅	✅	✅
dialog-frequency	✅	✅	✅	✅

➡️ Versions

Dependency	Version
Kotlin	2.3.20
Jetbrains Compose	1.10.3
Jetbrains Compose Material3	1.9.0

⚠️ Following experimental annotations are used:

• OptIn
  • androidx.compose.material3.ExperimentalMaterial3Api (3x)
  • androidx.compose.ui.ExperimentalComposeUiApi (3x)

I try to use as less experimental features as possible, but in this case the ones above are needed!

🔧 Setup

Using Version Catalogs

Define the dependencies inside your libs.versions.toml file.

[versions]

composedialogs = "<LATEST-VERSION>"

[libraries]

composedialogs-core = { module = "io.github.mflisar.composedialogs:core", version.ref = "composedialogs" }
composedialogs-dialog-color = { module = "io.github.mflisar.composedialogs:dialog-color", version.ref = "composedialogs" }
composedialogs-dialog-date = { module = "io.github.mflisar.composedialogs:dialog-date", version.ref = "composedialogs" }
composedialogs-dialog-info = { module = "io.github.mflisar.composedialogs:dialog-info", version.ref = "composedialogs" }
composedialogs-dialog-input = { module = "io.github.mflisar.composedialogs:dialog-input", version.ref = "composedialogs" }
composedialogs-dialog-list = { module = "io.github.mflisar.composedialogs:dialog-list", version.ref = "composedialogs" }
composedialogs-dialog-menu = { module = "io.github.mflisar.composedialogs:dialog-menu", version.ref = "composedialogs" }
composedialogs-dialog-number = { module = "io.github.mflisar.composedialogs:dialog-number", version.ref = "composedialogs" }
composedialogs-dialog-progress = { module = "io.github.mflisar.composedialogs:dialog-progress", version.ref = "composedialogs" }
composedialogs-dialog-time = { module = "io.github.mflisar.composedialogs:dialog-time", version.ref = "composedialogs" }
composedialogs-dialog-frequency = { module = "io.github.mflisar.composedialogs:dialog-frequency", version.ref = "composedialogs" }

And then use the definitions in your projects build.gradle.kts file like following:

implementation(libs.composedialogs.core)
implementation(libs.composedialogs.dialog.color)
implementation(libs.composedialogs.dialog.date)
implementation(libs.composedialogs.dialog.info)
implementation(libs.composedialogs.dialog.input)
implementation(libs.composedialogs.dialog.list)
implementation(libs.composedialogs.dialog.menu)
implementation(libs.composedialogs.dialog.number)
implementation(libs.composedialogs.dialog.progress)
implementation(libs.composedialogs.dialog.time)
implementation(libs.composedialogs.dialog.frequency)

Direct Dependency Notation

Simply add the dependencies inside your build.gradle.kts file.

val composedialogs = "<LATEST-VERSION>"

implementation("io.github.mflisar.composedialogs:core:${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-menu:${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}")
implementation("io.github.mflisar.composedialogs:dialog-frequency:${composedialogs}")

🚀 Usage

Basic examples

// create and remember a state
val state = rememberDialogState()

// Create a dialog composable
if (state.visible) {
    DialogInfo(
        state = state,
        info = "Some "
    )
}

// show the dialog inside a button press event or similar
Button(onClick = { state.show() }) {
    Text("Show Dialog")
}

Alternatively you can hold any saveable state inside dialog state. If the dialog state holds any data, it will consider itself as visible.

// create and remember a state (e.g. selected list index as in this example)
val state = rememberDialogState<Int>(data = null)

// show a dialog if necessary
if (state.showing)
{
    val data = state.requireData() // in this example the data is the list index
    DialogInfo(
        state = state,
        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")
            }
        }
    }
}

Styling/Customisation and events

All dialog (also custom ones) do support styling like:

• optional icon (including style like CenterTop and Begin)
• dialog style (dialog, bottom sheet, fullscreen)
• custom buttons (zero, one or two) with custom texts
• a options variable to set up features like dismissOnButtonClick, dismissOnBackPress and dismissOnClickOutside
• an event callback for the close event and button click event

Check out the advanced region on the side for more details.

Dialogs

Check out all the modules to find out more about the available implementations.

📁 Modules

• core
• dialog-color
• dialog-date
• dialog-frequency
• dialog-info
• dialog-input
• dialog-list
• dialog-menu
• dialog-number
• dialog-progress
• dialog-time

✨ Demo

A full demo is included inside the demo module, it shows nearly every usage with working examples.

ℹ️ More

• Advanced
  • Buttons
  • Custom Dialog
  • Events
  • Styles
• Migration
  • v2

📚 API

Check out the API documentation.

💡 Other Libraries

You can find more libraries (all multiplatform) of mine that all do work together nicely here.