134

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?

Improve this question
3
  • 2
    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. Commented May 2, 2022 at 9:57
  • 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? Commented May 2, 2022 at 10:01
  • 1
    Yeah, I am on composeVersion = "1.1.1" and I have seen @Pylyp Dukhov answer below which clarifies the differences. Commented May 2, 2022 at 10:20

8 Answers 8

Reset to default
262

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

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?
@BenjyTec you should apply it to the topmost container, in this case NavHost
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
@alfietap 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
@alfietap 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.
|
12

Add the it keyword:

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

This should work.

Improve this answer

3 Comments

Wild, it works. but why can you elaborate more?
@JugertMucoimaj Your question is answered by Phil Dukhov below. stackoverflow.com/a/72085218/4891188
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.
11

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)){

  }
Improve this answer

Comments

2

you can use this annotation :

@SuppressLint("UnusedMaterialScaffoldPaddingParameter")
Improve this answer

Comments

2

use padding in Column and delete content

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

Comments

0

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)
                )
            }
Improve this answer

Comments

0

This has worked for me I wanted to nest bottom navigation, and sider navigation on the same place, after struggles I settled for this one [this has worked for me I wanted to nest bottom navigation, and sider navigation on the same place, after struggles I settled for this one

enter image description here

Improve this answer

Comments

-6

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"
}
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.