Search code examples
androidandroid-jetpack-composeandroid-jetpack-compose-material3material3

How to remove top-right and bottom-right rounded corners in ModalNavigationDrawer() component in Material3?


Check in the image below:

ModalNavigationDrawer

I tried this but not worked.

ModalNavigationDrawer(
        drawerState = drawerState,
        drawerContent = {
            ModalDrawerSheet(
                //case-1
                modifier = Modifier.clip(RectangleShape), //<--- It draws a shape in background of drawer.
                //or
                //case-2
                modifier = Modifier.background(Color.White), //<--- It draws a color in background of drawer.
            ) {
                //Drawer Items here
            }
        },
        content = {
            //Scaffold here
        }
    )

You can see official documentation here of ModalNavigationDrawer.


Solution

  • ModalDrawerSheet has a drawerShape option:

    ModalDrawerSheet(
        drawerShape = RectangleShape,
    ) {
        //Drawer Items here
    }