Content padding parameter it is not used

Question

I recently started working with Jetpack Compose. I've got the following composable:

@Composable
fun SearchScreen(navController: NavHostController) {
    Scaffold(
        topBar = { SearchBar() },
        content = {
            Column (
                modifier = Modifier.fillMaxSize()
            ) {
                // some nested Composables
            }
        }
    )
}

But with this code as-is, the whole code within content = {...} is being underlined in red saying Jetpack Compose: Content padding parameter it is not used. I already read in this Stackoverflow Post that actually, PaddingValues only are provided in a Scaffold if the bottomBar is set, which obviously is not the case here. So I do not understand why I am getting this error.

Note: The app actually does use a BottomNavigation, but not within the Composable that I showed above. Can it be that this is still somehow propagated here?

Caldarium

I copy-pasted your composable and I can't reproduce the underlined error. I have also put the content argument as a trailing lambda and the code works fine. – Luanneluanni

Interesting. Could it be related to my compose version? I am using compose_version = '1.2.0-alpha08, as I need the FilterChip Composable. Which version are you using? – Caldarium

Yeah, I am on composeVersion = "1.1.1" and I have seen @Pylyp Dukhov answer below which clarifies the differences. – Luanneluanni

Answer 1

It's required to use padding parameter, passed into Scaffold content composable. You should apply it to the topmost container/view in content:

content = { padding ->
    Column(
        modifier = Modifier
            .padding(padding)
    // ...

This is done to prevent layout problems, for example, when the scaffold has a bottom bar, without the use of this padding part of your view will be under the bar.

You can always suppress it with @SuppressLint("UnusedMaterialScaffoldPaddingParameter"), but I would recommend doing this only when you know exactly what you are doing.

Winner

Thanks, this explains it! One follow up question though, if I have a NavHost set as a child of a Scaffold, would I just set the padding directly to the NavHost, or do I need to somehow pass this padding to the seperate composables that are going to be displayed within the NavHost? – Caldarium

@Caldarium you should apply it to the topmost container, in this case NavHost – Winner

I've applied this to my top most container and still get the error, supressing it seems to be the only way of getting rid of it – Bernabernadene

@Bernabernadene show the code how you did it, e.g. using gist. it should work for sure, if your code is correct and it doesn't work - it should be reported as IDE bug – Winner

gist.github.com/alfietapping/f064e20e82b4d84aaf2c304be165cbdf - AppNavigation contains the NavHost – Bernabernadene

@Bernabernadene it doesn't show an error to me. Make sure you're using latest IDE and android gradle plugin. Try creating a new project with the same code to see if you can reproduce it. If yes, report including this sample project, your IDE version and sample project. – Winner

Yeesh. I was like WTF; I copied a Composable from another project I'm working on where it was fine, and didn't see why it had a problem in my new project. My older project must have a bit older version of Compose I guess. Jeez thanks. – Roentgen

Answer 2

I seen a bug in version alpha and I was using SmallTopAppBar() Scaffold didn't provide paddings to two composables was on top of each other. After updating it, just realized the bug fixed and Scaffold has itself a padding so composables is not on top of rach other anymore.

Usage:

  Scaffold(topBar = { AppBar() }) { paddingValues ->
  AnyComposable(modifier = Modifier.padding(paddingValues)){

  }

Cocainism

Answer 3

Add the it keyword:

Scaffold(
        topBar = { SearchBar() },
        content = { it
            Column(modifier = Modifier
                .fillMaxSize()
                .verticalScroll(rememberScrollState()))

This should work.

Quadruplex

Wild, it works. but why can you elaborate more? – Prittleprattle

@JugertMucoimaj Your question is answered by Phil Dukhov below. https://mcmap.net/q/193437/-content-padding-parameter-it-is-not-used – Savdeep

From my understanding, this removes the the linting error, as the padding parameter is "used" within the content Composable with the it keyword. However, this does not apply the padding, and thus is rather a workaround than a fix. Refer to the accepted answer for a valid way to solve this. – Caldarium

Answer 4

you can use this annotation :

@SuppressLint("UnusedMaterialScaffoldPaddingParameter")

Juncaceous

Answer 5

use padding in Column and delete content

Scaffold(
    topBar = { SearchBar() }
){
    Column(Modifier.padding(it)) {
                ...
    }
}

Serpigo

Answer 6

I fixed this issue by passing the content's padding to the Modifier padding method:

Example:

 content = { padding ->
                MainScreenContainer(
                    navController = navController,
                    modifier = Modifier.padding(padding)
                )
            }

Nessa

Answer 7

app build.gradle add this:

 buildFeatures {
    compose = true
    kotlinOptions.freeCompilerArgs += "-Xopt-in=androidx.compose.material.ExperimentalMaterialApi"
    kotlinOptions.freeCompilerArgs += "-Xopt-in=androidx.compose.foundation.ExperimentalFoundationApi"
    kotlinOptions.freeCompilerArgs += "-Xopt-in=androidx.compose.ui.ExperimentalComposeUiApi"
    kotlinOptions.freeCompilerArgs += "-Xopt-in=androidx.compose.animation.ExperimentalAnimationApi"
    kotlinOptions.freeCompilerArgs += "-Xopt-in=androidx.compose.animation.graphics.ExperimentalAnimationGraphicsApi"
    kotlinOptions.freeCompilerArgs += "-Xopt-in=kotlinx.serialization.ExperimentalSerializationApi"
    kotlinOptions.freeCompilerArgs += "-Xopt-in=com.google.accompanist.navigation.material.ExperimentalMaterialNavigationApi"
}

Log