Quick Start

Quick Start

This guide will get you up and running with Deskit dialogs in minutes. Each example shows a complete, working implementation that you can copy and use in your project.

Prerequisites

Before you start, make sure you have:

• Deskit installed in your project (Installation Guide)
• A basic Compose for Desktop application set up

File Chooser Dialog

The FileChooserDialog allows users to select files with optional extension filtering and provides file information on hover.

@Composable
fun FileChooserExample() {
    var showFileDialog by remember { mutableStateOf(false) }
    var selectedFile by remember { mutableStateOf<File?>(null) }

    Column {
        Button(onClick = { showFileDialog = true }) {
            Text("Choose File")
        }
        
        selectedFile?.let { file ->
            Text("Selected: ${file.name}")
        }
    }

    if (showFileDialog) {
        FileChooserDialog(
            title = "Select a Document",
            allowedExtensions = listOf("txt", "pdf", "md", "docx"),
            folderIconColor = MaterialTheme.colorScheme.tertiary,
            fileIconColor = MaterialTheme.colorScheme.primary,
            resizableFileInfoDialog = true, // New in 1.3.0
            onFileSelected = { file ->
                selectedFile = file
                showFileDialog = false
            },
            onCancel = { showFileDialog = false }
        )
    }
}

Key Features:

• Extension Filtering: Only show specific file types
• File Information: Hover over files to see metadata
• Breadcrumb Navigation: Click path segments to navigate
• Scrollbars: Handle large directories with ease

File Saver Dialog

The FileSaverDialog lets users choose where to save files and create new folders on the fly.

@Composable
fun FileSaverExample() {
    var showSaveDialog by remember { mutableStateOf(false) }
    var savedLocation by remember { mutableStateOf<String?>(null) }

    Column {
        Button(onClick = { showSaveDialog = true }) {
            Text("Save Document")
        }
        
        savedLocation?.let { location ->
            Text("Saved to: $location")
        }
    }

    if (showSaveDialog) {
        FileSaverDialog(
            title = "Save Document",
            suggestedFileName = "my-document",
            extension = ".txt",
            fileIconColor = MaterialTheme.colorScheme.primary,
            folderIconColor = MaterialTheme.colorScheme.tertiary,
            resizableFileInfoDialog = true, // New in 1.3.0
            onSave = { file ->
                file.writeText("Hello, World!")
                savedLocation = file.absolutePath
                showSaveDialog = false
            },
            onCancel = { showSaveDialog = false }
        )
    }
}

Key Features:

• Folder Creation: Create new folders during save
• File Extension Handling: Automatic extension management
• File Existence Check: Warns when overwriting existing files
• File Information: View metadata for existing files

Folder Chooser Dialog

The FolderChooserDialog is perfect for selecting directories, with visual distinction between files and folders.

@Composable
fun FolderChooserExample() {
    var showFolderDialog by remember { mutableStateOf(false) }
    var selectedFolder by remember { mutableStateOf<File?>(null) }

    Column {
        Button(onClick = { showFolderDialog = true }) {
            Text("Choose Folder")
        }
        
        selectedFolder?.let { folder ->
            Text("Selected: ${folder.absolutePath}")
        }
    }

    if (showFolderDialog) {
        FolderChooserDialog(
            title = "Select Export Folder",
            fileItemColor = MaterialTheme.colorScheme.outline.copy(alpha = 0.6f),
            folderItemColor = MaterialTheme.colorScheme.tertiary,
            isFileInfoDialogResizable = true, // New in 1.3.0
            onFolderSelected = { folder ->
                selectedFolder = folder
                showFolderDialog = false
            },
            onCancel = { showFolderDialog = false }
        )
    }
}

Key Features:

• Folder-Only Selection: Files are shown but dimmed and non-selectable
• Folder Information: View folder size and file count
• User Guidance: Helpful message when trying to select files

Confirmation Dialog

Use ConfirmationDialog for actions that require user confirmation, with optional custom icons.

@Composable
fun ConfirmationExample() {
    var showConfirmDialog by remember { mutableStateOf(false) }
    var actionResult by remember { mutableStateOf<String?>(null) }

    Column {
        Button(onClick = { showConfirmDialog = true }) {
            Text("Delete Item")
        }
        
        actionResult?.let { result ->
            Text(result)
        }
    }

    if (showConfirmDialog) {
        ConfirmationDialog(
            width = 450.dp,
            height = 250.dp,
            title = "Confirm Deletion",
            message = "Are you sure you want to delete this item? This action cannot be undone.",
            icon = painterResource(Res.drawable.warning),
            iconTint = MaterialTheme.colorScheme.error,
            confirmButtonText = "Delete",
            cancelButtonText = "Keep",
            onConfirm = {
                actionResult = "Item deleted successfully"
                showConfirmDialog = false
            },
            onCancel = {
                actionResult = "Deletion cancelled"
                showConfirmDialog = false
            }
        )
    }
}

Key Features:

• Custom Icons: Add visual context with icons
• Flexible Content: Use custom composables for complex messages
• Button Customization: Customize button text and colors

Info Dialog

The InfoDialog is perfect for displaying information, status updates, or success messages.

@Composable
fun InfoExample() {
    var showInfoDialog by remember { mutableStateOf(false) }

    Button(onClick = { showInfoDialog = true }) {
        Text("Show Info")
    }

    if (showInfoDialog) {
        InfoDialog(
            width = 400.dp,
            height = 300.dp,
            title = "Operation Complete",
            message = "Your file has been processed successfully!",
            icon = painterResource(Res.drawable.success),
            iconTint = MaterialTheme.colorScheme.primary,
            resizable = true,
            onClose = { showInfoDialog = false }
        )
    }
}

Key Features:

• Custom Icons: Visual feedback with themed icons
• Resizable: Allow users to resize for better content viewing
• Custom Content: Replace default message with complex layouts

Complete Application Example

Here's a complete example showing multiple dialogs working together:

@Composable
fun DeskitDemo() {
    var currentFile by remember { mutableStateOf<File?>(null) }
    var showFileChooser by remember { mutableStateOf(false) }
    var showFileSaver by remember { mutableStateOf(false) }
    var showInfo by remember { mutableStateOf(false) }

    Column(
        modifier = Modifier.padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        Button(onClick = { showFileChooser = true }) {
            Text("Open File")
        }
        
        Button(
            onClick = { showFileSaver = true },
            enabled = currentFile != null
        ) {
            Text("Save As...")
        }
        
        currentFile?.let { file ->
            Text("Current file: ${file.name}")
        }
    }

    // File Chooser
    if (showFileChooser) {
        FileChooserDialog(
            title = "Open Document",
            allowedExtensions = listOf("txt", "md"),
            onFileSelected = { file ->
                currentFile = file
                showFileChooser = false
                showInfo = true
            },
            onCancel = { showFileChooser = false }
        )
    }

    // File Saver
    if (showFileSaver) {
        FileSaverDialog(
            title = "Save Document",
            suggestedFileName = currentFile?.nameWithoutExtension ?: "document",
            extension = ".txt",
            onSave = { file ->
                // Copy current file content to new location
                currentFile?.copyTo(file, overwrite = true)
                showFileSaver = false
                showInfo = true
            },
            onCancel = { showFileSaver = false }
        )
    }

    // Success Info
    if (showInfo) {
        InfoDialog(
            title = "Success",
            message = "Operation completed successfully!",
            icon = painterResource(Res.drawable.check),
            onClose = { showInfo = false }
        )
    }
}

Next Steps

Now that you've seen the basics, explore these advanced topics:

• Custom Content in Dialogs - Learn how to create complex dialog layouts

Tips for Success

1. State Management: Always use remember for dialog visibility states
2. File Handling: Don't forget to handle file operations in try-catch blocks
3. User Experience: Provide feedback after file operations complete
4. Theming: Use MaterialTheme.colorScheme colors for consistent theming
5. Performance: Use resizableFileInfoDialog = false for better performance if not needed