Unresolved Reference error for ScaffoldState with Material3

Question

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"

Gwynethgwynne

I'm using 1.3.0-alpha02 for androidx.compose.ui:ui and androidx.compose.ui:ui-tooling-preview, 1.6.0-alpha05 for androidx.activity:activity-composeand 1.0.0-alpha15 for androidx.compose.material3:material3 (there may be newer versions, haven't updated yet). And... 0.26.0-alpha is my accompanist version too; the non material 3 version is 1.7.0-alpha03 (for com.google.android.material:material) and..1.9.0-alpha05 is ` androidx.core:core-ktx:`. Using Gradle 7.2.1. I'm sure I'm not on the latest. Targeting API 32 / Kotlin 1.7.10. – Bowing

Answer 1

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.

Bowing

This works, but does it violate best practices to use Material2 and Material3 in the same module or project? – Gwynethgwynne

I don't see which "best" practice this would violate. You "could/should" have a gradle module that includes these dependencies and each of your features (whether they are individual modules or not) will pull the dependencies offered by this Material module. Not all of Material3 is ready, so for some time you'll need to have both. – Bowing

Answer 2

ScaffoldState does not exist in m3, the official document explains about this and its alternative:

The M2 ScaffoldState class no longer exists in M3 as it contains a drawerState parameter which is no longer needed. To show snackbars with the M3 Scaffold, use SnackbarHostState instead:

import androidx.compose.material3.Scaffold
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState

val snackbarHostState = remember { SnackbarHostState() }
val scope = rememberCoroutineScope()

Scaffold(
    snackbarHost = { SnackbarHost(snackbarHostState) },
    content = {
        …
        scope.launch {
            snackbarHostState.showSnackbar(…)
        }
    }
)

All of the drawer* parameters from the M2 Scaffold have been removed from the M3 Scaffold. These include parameters such as drawerShape and drawerContent. To show a drawer with the M3 Scaffold, use a navigation drawer composable, such as ModalNavigationDrawer, instead:

import androidx.compose.material3.DrawerValue
import androidx.compose.material3.ModalDrawerSheet
import androidx.compose.material3.ModalNavigationDrawer
import androidx.compose.material3.Scaffold
import androidx.compose.material3.rememberDrawerState

val drawerState = rememberDrawerState(DrawerValue.Closed)
val scope = rememberCoroutineScope()

ModalNavigationDrawer(
    drawerState = drawerState,
    drawerContent = {
        ModalDrawerSheet(
            drawerShape = …,
            drawerTonalElevation = …,
            drawerContainerColor = …,
            drawerContentColor = …,
            content = { … }
        )
    },
    gesturesEnabled = …,
    scrimColor = …,
    content = {
        Scaffold(
            content = {
                …
                scope.launch {
                    drawerState.open()
                }
            }
        )
    }
)

for more information about the items removed from Material3 and their replacements, refer to the link below.

Migrate from Material 2 to Material 3 in Compose

Heall

Answer 3

It's Windows. Go to File > Invalidate Caches > (Check Everything) Invalidate Caches and Restart. Might as well try a Build > Rebuild Project while staying connected to the internet to ensure all the dependencies are properly downloaded. Hopefully you won't need to manually shred partially downloaded libraries from the internal folders... It's like diving head-first into dirty laundry. Kinda also reminds me of that Avengers scene where they repair a partially blown-up turbine thruster.

Spelldown

What does Windows have to do with this? Nowhere in the question is Windows mentioned. – Bowing