1 | initial version |
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.