How to set the Scaffold Drawer Width in JetpackCompose?

Viewed 3017

We can have Navigation Drawer in JetpackCompose by using Scaffold as below

Scaffold(
    drawerContent = { Text(text ="Drawer") }
) {}

enter image description here

I want to make the width of the drawer smaller. How can I do so?

3 Answers

You can modify the shape (including width and height) using drawerShape parameter in Scaffold method.

So for instance

 Scaffold(
    scaffoldState = scaffoldState,
    drawerContent = { Text("Drawer content") },
    drawerShape = customShape(),
    content = {inner padding -> /* Body*/}
)

Then your customShape function

fun customShape() =  object : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
        ): Outline {
            return Outline.Rectangle(Rect(0f,0f,100f /* width */, 131f /* height */))
     }
 }

You can also use Outline.Rounded to get rounded corners

Scaffold(
      topBar = {
          topBar()
      },
      scaffoldState = scaffoldState,
      drawerContent = {
          drawer()
      },
      drawerGesturesEnabled = true
  ) { innerPadding ->
      NavigationHost(navController = navController)
  }
}

Have you tried adding a modifier inside your drawer composable ?

Something like this:

Scaffold(drawerContent = { 
        Box(modifier = Modifier.fillMaxWidth(0.9f){
            Text(text = "Drawer") 
        }
    }) {}
Related