How can a debug banner similar to the one on Flutter be added on Jetpack Compose?

edit

To add a debug banner similar to the one on Flutter in Jetpack Compose, you can create a customized Composable function that will wrap the main content of your application with a banner that displays the current build type or any other custom information you want to show.

Here's an example implementation that you can use as a starting point:

@Composable
fun DebugBanner(
    info: String = "",
    color: Color = Color.Red,
    modifier: Modifier = Modifier
) {
    if (BuildConfig.DEBUG) {
        Box(
            modifier = modifier.fillMaxWidth()
                .padding(top = 32.dp)
                .background(color)
        ) {
            Text(
                text = info,
                color = Color.White,
                fontSize = 12.sp,
                modifier = Modifier.padding(8.dp)
            )
        }
    }
}

In this implementation, the DebugBanner function takes in a String parameter for the information text and a Color parameter for the banner background color. You can customize these parameters to fit your needs.

To use this DebugBanner function, simply wrap your main content with it like this:

ContentScreen() {
    DebugBanner(info = "Debug Mode")
    // Main content goes here
}

This will add the debug banner above your main content only in debug mode.