cp-radhika-s

@Composable
fun PulsateEffect() {
    Button(onClick = {
        // clicked
    }, shape = RoundedCornerShape(12.dp),
        contentPadding = PaddingValues(16.dp),
        modifier = Modifier.bounceClick()) {
        Text(text = "Click me")
    }
}

cp-radhika-s

enum class ButtonState { Pressed, Idle }
fun Modifier.bounceClick() = composed {
    var buttonState by remember { mutableStateOf(ButtonState.Idle) }
    val scale by animateFloatAsState(if (buttonState == ButtonState.Pressed) 0.70f else 1f)

    this
        .graphicsLayer {
            scaleX = scale
            scaleY = scale
        }

cp-radhika-s

Transitions: {
  default: {
    from: 'start',
    to: 'end',
    onSwipe: {
      anchor: 'contentBg',
      direction: 'up',
      side: 'top'
    },
  }

cp-radhika-s

start: {
  date: {
    width: 'spread',
    height: 'wrap',
    start: ['parent', 'start'],
    end: ['parent', 'end'],
    top: ['subTitleDivider','bottom'],
  },
  actions: {
    width: 'spread',

cp-radhika-s

Text(
    modifier = Modifier
        .layoutId("date")
        .fillMaxWidth()
        .padding(6.dp),
    text = "September, 2022", fontSize = 16.sp,
    textAlign = TextAlign.Center,
    color = Gray
)
Row(

cp-radhika-s

start: {
  title: {
    width: 'spread',
    height: 'wrap',
    start: ['parent', 'start'],
    end: ['parent', 'end'],
    top: ['parent','top',200],
  },
  titleDivider: {
    width: 'spread',

cp-radhika-s

Text(
    text = "Fresh Strawberry Cake", fontSize = 22.sp,
    textAlign = TextAlign.Center,
    fontWeight = FontWeight.SemiBold, modifier = Modifier
        .layoutId("title")
        .fillMaxWidth()
        .padding(10.dp)
)

Divider(

cp-radhika-s

start: {
  ...
  contentBg: {
    width: 'spread',
    height: 'spread',
    start: ['parent', 'start',16],
    end: ['parent', 'end',16],
    top: ['parent','top', 200],
    bottom: ['parent','bottom'],
  }

cp-radhika-s

Box(
    modifier = Modifier
        .fillMaxHeight()
        .background(White, shape = RoundedCornerShape(topStart = corners, topEnd = corners))
        .layoutId("contentBg")
)

cp-radhika-s

start: {
  headerImage: {
    width: "spread",
    height: 250,
    top: ['parent', 'top', 0],
    start: ['parent', 'start', 0],
    end: ['parent', 'end', 0],
    translationY: 0,
    alpha: 1
  }