How set width to drawer in jetpack compose>

Question

I can have Navigation Drawer in JetpackCompose by using Scaffold.

But when I change the size of drawbleShape, it set fixed width as default size.

Scaffold(
    drawerContent = { DrawableCompose() },
    drawableShape = MaterialTheme.shapes.small
) {}

I reference this post, How to set the Scaffold Drawer Width in JetpackCompose?

But it cut child compose like,

Scaffold(
    drawerContent = { DrawableCompose() },
    drawableShape = customShape()
) {}

@Composable
fun customShape() = object : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        return Outline.Rectangle(Rect(left = 0f, top = 0f, right = size.width * 2 / 3, bottom = size.height))
    }

DrawerCompose

@Composable
fun DrawerCompose(
    id: String
) {
    val focusManager = LocalFocusManager.current
    val keyboardController = LocalSoftwareKeyboardController.current

    Column(modifier = Modifier.fillMaxSize()) {
        OutlinedTextField(value = id, onValueChange = { onChangeEmpNo(it) }, modifier = Modifier.fillMaxWidth())
    }
}

As shown in the picture above, some parts are cut off. Is there any way to set width drawer compose width?

score 0 · Answer 1 · edited Nov 26 '21 at 14:20

You should be able to solve it by adding Spacer, something like:

Scaffold(
    drawerContent = {
        Row {
            DrawableCompose()
            Spacer(Modifier.fillMaxHeight().width(48.dp))
        }
    },
    drawerShape = customShape()
) {}

If you want to however use the right with, you might use this:

val myShape = customShape()
val widthDp = pxToDp(myShape.leftSpaceWidth!!)
Scaffold(
    drawerContent = {
        Row {
            DrawableCompose()
            Spacer(Modifier.fillMaxHeight().width(widthDp))
        }
    },
    drawerShape = myShape
) {}

For above solution you have to add pxToDp function and adjust the customShape function:

@Composable
fun pxToDp(px: Float) = with(LocalDensity.current) { px.toDp() }

@Composable
fun customShape() = MyShape()

class MyShape : Shape {
    var leftSpaceWidth: Float? = null
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        leftSpaceWidth = size.width * 1 / 3
        return Outline.Rectangle(Rect(left = 0f, top = 0f, right = size.width * 2 / 3, bottom = size.height))
    }
}

How set width to drawer in jetpack compose>

1 Answers1