How to set width and height for NavigationDrawer in Jetpack Compose

1
votes

Right now I am using the Scaffold() composable to create a basic drawer layout. However the drawer is always the same size but I want it with a custom width, taking only 2/3 of the screen size and also a custom height, like a padding top and bottom. This is my code so far:

Scaffold(
                    scaffoldState = state,
                    topBar = {
                        TopAppBar(
                            title = {
                                    SearchBar()
                                    },
                            navigationIcon = {
                                IconButton(onClick = {
                                    coroutineScope.launch { state.drawerState.open() }
                                }) {
                                    Icon(Icons.Default.Menu, contentDescription = null)
                                }
                            },
                            backgroundColor = MaterialTheme.colors.background
                        )
                    },
                    drawerShape = RoundedCornerShape(topEnd = 16.dp, bottomEnd = 16.dp),
                    drawerContent = { NavigationDrawer(state, coroutineScope) },
                    content = {
                        MapScreen(
                        )
                    }
                )

Changing anything in my composable function NavigationDrawer() won't change anything. Is there any way to achieve this in jetpack compose?

1
androidandroid-layoutkotlinnavigation-drawerandroid-jetpack-compose

1 Answers

0
votes

You can add something like this.

@Composable
fun ScaffoldWithPanel() {
    Scaffold(
        topBar = { ... },
        bottomBar = { ... },
        bodyContent = {
            WithConstraints {
                val parentWidth = with(AmbientDensity.current) {
                    constraints.maxWidth.toDp()
                }
                val parentHeight = with(AmbientDensity.current) {
                    constraints.maxHeight.toDp() 
                }
                Box {
                    MainContent()
                    if(drawerState.value != DrawerValue.Open) {
                        Box(modifier = Modifier.size(parentWidth / 2, height = parentHeight)) {
                            SidePanel()   
                        }
                    }
                }
            }
        }
    )
}

For more detail visit this website: https://amryousef.me/side-drawer-jetpack-compose