Android Jetpack Compose full width drawer

Question

How do you make a drawer to fill entire width of a screen?

    ModalNavigationDrawer(
        drawerState = drawerState,
        drawerContent = {
            ModalDrawerSheet(
                modifier = Modifier
                    .fillMaxWidth()
                    .fillMaxHeight()
                    .background(Color.Yellow),
            ) {

            }
        },
        content = {

        }
    )

This code is not working. When drawer is closed, a small piece of it is visible.

Answer 1

This weird behaviour happens when adding the modifier directly to ModalDrawerSheet, by adding it to child elements it doesn't happen.

@Composable
fun Test() {
    val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)

    ModalNavigationDrawer(
        drawerState = drawerState,
        drawerContent = {
            ModalDrawerSheet(
                modifier = Modifier
                    .then(
                        if (drawerState.targetValue == DrawerValue.Open) Modifier.fillMaxSize() else Modifier
                    )
            ) {
                Column(
                    modifier = Modifier
                        .fillMaxSize()
                        .background(Color.Yellow)
                ) {

                }
            }
        },
    content = {

    }
  )
}

Though, applying max size to ModalDrawerSheet causes a side effect when drawer is closed, it's possible for we to add a condition to enable max size only when the drawer is open by using Modifier.then.