I was trying to make this example from youtube, bu...

# compose

[Geert]

I was trying to make this example from youtube, but I have 2 problems.
The first one is that state is deprecated, but I cant make remember work with these 2 values.
The second thing is that I cannot ripple anymore from Modifier

Code:

@Composable
fun ModifiedShape(){
    // TODO: Replace by remember?
     val (shape, setShape) = state<Shape> { CircleShape }

    // TODO: Fix error
    //       Destructuring declaration initializer of type Shape must have a 'component1()' function
    //       Destructuring declaration initializer of type Shape must have a 'component2()' function
    // val (shape, setShape) = remember<Shape> { CircleShape }
    Image(
        asset = imageResource(id = R.drawable.ic_launcher_background),
        modifier = Modifier
            .size(256.dp)
            .padding(16.dp)
            .drawShadow(8.dp, shape)
            .border(6.dp, MaterialTheme.colors.primary, shape)
            .border(12.dp, MaterialTheme.colors.secondary, shape)
            .border(18.dp, MaterialTheme.colors.background, shape)
            // TODO: Add ripple?
            //.ripple(color = MaterialTheme.colors.surface)
            .clickable {
                setShape(
                    if (shape == CircleShape) {
                        CutCornerShape(topLeft = 32.dp, bottomRight = 32.dp)
                    } else {
                        CircleShape
                    }
                )
            }

    )

}

[Yann Badoual]

Replace = state with = = remember { mutableStateOf(CircleShape) }

[Yann Badoual]

The clickable modifier should apply a ripple by default I believe.
It can be changed with the interaction parameter of clickable modifier.
As for the color, I'm not sure what color it's using by default.

But you can create your own instance of RippleIndication and pass the color you want if needed.

You can check the default value in DefaultRippleTheme. By default it seems to be either white or contentColor() depending on current theme (light or dark) and contentColor's lumiance

[Geert]

I tried to edit remember, but getting these two errors.

[Geert]

There is something wrong with the Shape type I guess

[Brett Best]

@Geert try two expressions

[Brett Best]

Might also need to instantiate the CircleShape

[Brett Best]

mutableStateOf(CircleShape())

[Geert]

Instantiate is not working. Also setshape is not working anymore

[Brett Best]

Do you have this on GitHub?

[Geert]

No. I just created a new project and this is the only code

[Geert]

This is the video, but thery are using an old version if Compose i guess

https://youtu.be/U5BwfqBpiWU?t=609▾

[Geert]

This line is actually working:

val (shape, setShape) = remember { mutableStateOf(CircleShape) }

But the CutCornerShape and CircleShape are both inheriting the Shape interface.

[Geert]

But the problem with the shape interface is that is doesnt have the destructering declaration

[Geert]

And I cannot use mutableState of Shape since its an interface

[Yann Badoual]

val (shape, setShape) = remember { mutableStateOf<Shape>(CutCornerShape()) }

[Yann Badoual]

this should work. the type parameter should be specified on mutableStateOf , and the argument should be the default value

[Yann Badoual]

so you need to pass an actual instance, and not a type (Shape)

[Geert]

Yes thank you! I see that remember must be MutableState. So that was why I couldn’t specify Shape. I did it in the wrong place.

[Geert]

And CutCornershape has to be instantiated, but with more parameters, but using CircleShipe only it also works!

[Geert]

Where CircleShape is instantiated already:

val CircleShape = RoundedCornerShape(50)

[Yann Badoual]

Btw, you can also use the following form:
var shape by remember { mutableStateOf(CirlceShape) }

and instead of calling setShape , you can use shape as a mutable variable.

If you do, just make sure to add the following import

import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue

Or you'll get an error (known intellij bug)