CODEWITHSUNDEEP
androidkotlinandroid-jetpack-composeandroid-jetpack
iliya
iliya

Reputation: 109

DrawerContent does not exist in my Jetpack Compose

I was looking at a tutorial titled creating a menu or NavigationDrawer, which said to use drawerContent in a scaffold, but I don't have anything called drawerContent in Jetpack Compose and Jetpack Compose's libraries under any title! Help me please. Should I use an implementation?

@Composable
fun hi(){
    Scaffold {
        drawerContent = { Drawer() }
    }
}

Upvotes: 6

Views: 1847

Answers (1)

Megh Lath
Megh Lath

Reputation: 2214

drawerContent is removed from Scaffold in material3. If you want to use drawerContent then you may use material or you can use ModalNavigationDrawer available in material3, but for that you have to use Scaffold as content in ModalNavigationDrawer.

Checkout this solution for better understanding: https://stackoverflow.com/a/75019927/19212377

Update:


@OptIn(ExperimentalMaterial3Api::class)
@Preview
@Composable
fun SimpleTopAppBar() {

    val scope = rememberCoroutineScope()
    val drawerState = rememberDrawerState(DrawerValue.Closed)
    val items = listOf(Icons.Default.Close, Icons.Default.Clear, Icons.Default.Call)
    val selectedItem = remember { mutableStateOf(items[0]) }

    ModalNavigationDrawer(
        drawerState = drawerState,
        drawerContent = {

            ModalDrawerSheet {
                Spacer(Modifier.height(12.dp))
                items.forEach { item ->
                    NavigationDrawerItem(
                        icon = { Icon(item, contentDescription = null) },
                        label = { Text(item.name) },
                        selected = item == selectedItem.value,
                        onClick = {
                            scope.launch { drawerState.close() }
                            selectedItem.value = item
                        },
                        modifier = Modifier.padding(NavigationDrawerItemDefaults.ItemPadding)
                    )
                }
            }


        },
        content = {

            Scaffold(
                topBar = {
                    TopAppBar(
                        title = {
                            Text(
                                "Simple TopAppBar",
                                maxLines = 1,
                                overflow = TextOverflow.Ellipsis
                            )
                        },
                        navigationIcon = {
                            IconButton(onClick = { scope.launch { drawerState.open() } }) {
                                Icon(
                                    imageVector = Icons.Filled.Menu,
                                    contentDescription = "Localized description"
                                )
                            }
                        }
                    )
                },
                content = { innerPadding ->
                    LazyColumn(
                        contentPadding = innerPadding,
                        verticalArrangement = Arrangement.spacedBy(8.dp)
                    ) {

                    }
                },
                floatingActionButton = {
                    FloatingActionButton(
                        onClick = {
                            Intent(
                                applicationContext,
                                text::class.java
                            ).also { startActivity(it) }
                        },
                        containerColor = BottomAppBarDefaults.bottomAppBarFabColor,
                        elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation()
                    ) {
                        Icon(Icons.Filled.Add, "Localized description")
                    }
                }
            )
        }
    )
}

Upvotes: 5

Related Questions