CODEWITHSUNDEEP
androidkotlinandroid-jetpack-compose
Stefan
Stefan

Reputation: 4221

ModalDrawer Jetpack Compose - DrawerContent vs Content?

I'm trying to implement ModalDrawer with Jetpack Compose. Now I'm using ModalDrawer composable function which requires two main parameters: DrawerContent and Content. This is what kind of result I get when I pass an empty content parameter and few elements inside a DrawerContent parameter. I get those two drawers, instead of one. It's really confusing.

Scaffold(
    topBar = {
        TopAppBar(
            title = { Text(text = "Home") }
        )
    },
    drawerContent = {
        val drawerState = rememberDrawerState(DrawerValue.Open)
        ModalDrawer(
            drawerState = drawerState,
            drawerContent = { MyDrawerContent() },
            content = { }
        )
    },
    drawerContentColor = MaterialTheme.colors.onSurface,
    content = {}
)

enter image description here

Upvotes: 0

Views: 1938

Answers (1)

Narek Hayrapetyan
Narek Hayrapetyan

Reputation: 1919

Better to use or only ModalDrawer without scaffold or Scaffold with drawer content because ModalDrawer already have drawerContent parameter so here is showing two drawers because of two drawer contents (nested).

Scaffold(
    drawerContent = {
        Text("Drawer title", modifier = Modifier.padding(16.dp))
        Divider()
        // Drawer items
    }
) {
    // Screen content
}

OR

ModalDrawer(
        drawerState = drawerState,
        drawerContent = {
            Column {
                Text("Text in Drawer")
                Button(onClick = {
                    scope.launch {
                        drawerState.close()
                    }
                }) {
                    Text("Close Drawer")
                }
            }
        },
        content = {
            Column {
                Text("Text in Bodycontext")
                Button(onClick = {

                    scope.launch {
                        drawerState.open()
                    }

                }) {
                    Text("Click to open")
                }
            }
        }
    )

Upvotes: 3

Related Questions