Mohammad
Mohammad

Reputation: 1

How to Implement Full Screen View using Kotlin Multi Platform

How can I toggle full screen mode on windows using kotlin multiplatform when I have tried this piece of code in the desktopMain

package com.pistos

import androidx.compose.runtime.*
import androidx.compose.ui.unit.DpSize
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.*
import androidx.compose.ui.input.key.Key
import androidx.compose.ui.input.key.key

fun main() = application {
    val windowState = rememberWindowState(
        size = DpSize(1000.dp, 600.dp),
        placement = WindowPlacement.Floating
    )

    var isFullScreen by remember { mutableStateOf(false) }

    Window(
        onCloseRequest = ::exitApplication,
        title = "pistos",
        state = windowState,
        alwaysOnTop = true,
        undecorated = isFullScreen,
        onKeyEvent = {
            when (it.key) {
                Key.F11 -> {
                    isFullScreen = true
                    windowState.placement = WindowPlacement.Fullscreen
                    true
                }

                Key.Escape -> {
                    if (isFullScreen) {
                        isFullScreen = false
                        windowState.placement = WindowPlacement.Floating
                        true
                    } else false
                }

                else -> false
            }
        }
    ) {
        App()
    }
}

Whenever the undecorated value change from true to false or otherwise the app crashes with this error Exception in thread "main" java.awt.IllegalComponentStateException: The frame is displayable. But if the value is hardcoded like so undecorated=true then the application works fine, I can't set it to true because then the I would lose the close and minimization buttons I can't set it to false as it would not actually feel as a full screen view.

Claude suggested this solution by creating two screens, it works but it shows an annoying flicker I'm not sure if there is a better alternative for this.

package com.pistos

import androidx.compose.runtime.*
import androidx.compose.ui.unit.DpSize
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.*
import androidx.compose.ui.input.key.Key
import androidx.compose.ui.input.key.key

fun main() = application {
    val windowState = rememberWindowState(
        size = DpSize(1000.dp, 600.dp),
        placement = WindowPlacement.Floating
    )

    var isFullScreen by remember { mutableStateOf(false) }

    if (isFullScreen) {

        Window(
            onCloseRequest = ::exitApplication,
            title = "pistos",
            state = windowState,
            alwaysOnTop = true,
            undecorated = true,
            onKeyEvent = {
                when (it.key) {
                    Key.F11 -> {
                        isFullScreen = true
                        windowState.placement = WindowPlacement.Fullscreen
                        true
                    }

                    Key.Escape -> {
                        if (isFullScreen) {
                            isFullScreen = false
                            windowState.placement = WindowPlacement.Floating
                            true
                        } else false
                    }

                    else -> false
                }
            }
        ) {
            App()
        }
    } else {
        Window(
            onCloseRequest = ::exitApplication,
            title = "pistos",
            state = windowState,
            alwaysOnTop = true,
            undecorated = false,
            onKeyEvent = {
                when (it.key) {
                    Key.F11 -> {
                        isFullScreen = true
                        windowState.placement = WindowPlacement.Fullscreen
                        true
                    }

                    Key.Escape -> {
                        if (isFullScreen) {
                            isFullScreen = false
                            windowState.placement = WindowPlacement.Floating
                            true
                        } else false
                    }

                    else -> false
                }
            }
        ) {
            App()
        }
    }
}

Upvotes: 0

Views: 61

Answers (0)

Related Questions