Search code examples
androidandroid-jetpack-composematerial-components-androidandroid-jetpack-compose-material3

Unresolved Reference error for ScaffoldState with Material3


Android Studio throws an Unresolved Reference error for ScaffoldState with Material3. How can I make it work?

import androidx.compose.foundation.clickable
import androidx.compose.material3.*
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.navigation.NavController
import kotlinx.coroutines.launch

@Composable
fun CustomAppBar(
    title: String,
    backGroundColor: Color = Color.White,
    actions: @Composable () -> Unit = { },
    scaffoldState: ScaffoldState? = null, // Errors here...
    navController: NavController,
) {
    val scope = rememberCoroutineScope()

    SmallTopAppBar(
        title = {
            Text(
                title,
                maxLines = 1,
                overflow = TextOverflow.Ellipsis
            )
        },
        colors = TopAppBarDefaults.smallTopAppBarColors(
            containerColor = containerBackGroundColor,
            titleContentColor = titleContentColor
        ),
        navigationIcon = if (navController?.previousBackStackEntry != null) {
            {
                IconButton(onClick = { navController.navigateUp() }) {
                    Icon(
                        imageVector = Icons.Filled.ArrowBack,
                        contentDescription = "Back"
                    )
                }
            }
        } else {
            {
                IconButton(onClick = {
                    scope.launch {
                        scaffoldState?.drawerState?.open()
                    }
                }) {
                    Icon(
                        Icons.Filled.Menu,
                        contentDescription = "Nav drawer icon",
                    )
                }
            }
        },
        actions = {
            actions()
        }
    )
}

Dependencies

implementation "androidx.core:core-ktx:1.8.0"
implementation "androidx.compose.ui:ui:1.2.1"
implementation "androidx.compose.material3:material3:1.0.0-beta01"
implementation "androidx.compose.ui:ui-tooling-preview:1.2.1"
implementation "androidx.lifecycle:lifecycle-runtime-ktx:2.3.1"
implementation "androidx.activity:activity-compose:1.3.1"
implementation "androidx.compose.compiler:compiler:1.3.0"
implementation "androidx.navigation:navigation-runtime:2.5.1"
implementation "com.google.accompanist:accompanist-navigation-animation:0.23.1"

Solution

  • I've taken a look at my dependencies, and ScaffoldState is part of com.google.android.material:material:$materialVersion".

    In my case, I have 1.7.0-alpha03 so com.google.android.material:material:1.7.0-alpha03 (there could be newer versions at the time of this).

    I'm sure if you add that one and then the correct import:

    import androidx.compose.material.ScaffoldState you should be able to use it.

    Don't forget to Sync Gradle.