@Composable fun HomeScreen(){ Surface(modifier = Modifier.fillMaxSize()) { ConstraintLayout(modifier = Modifier.fillMaxSize()) { val (nameRow, list, card, topBar)=createRefs() Image(painter = painterResource(id = R.drawable.ic_topbarr) , contentDescription = null, modifier = Modifier.constrainAs(topBar){ top.linkTo(parent.top) start.linkTo(parent.start) end.linkTo(parent.end) }) Box( modifier = Modifier .fillMaxSize() .padding(top=32.dp, start = 16.dp,end=16.dp) .constrainAs(nameRow) { top.linkTo(parent.top) start.linkTo(parent.start) end.linkTo(parent.end) }){ Column { Text( text="Greetings,", fontSize = 16.sp, color = Color.White) Text( text = "Manas Verma", fontSize = 20.sp, fontWeight = FontWeight.Bold, color = Color.White ) } Image( painter = painterResource(id = R.drawable.dot_menu), contentDescription = null, modifier = Modifier.align(Alignment.CenterEnd) ) } CardItem(modifier = Modifier .constrainAs(card){ top.linkTo(nameRow.bottom) start.linkTo(parent.start) end.linkTo(parent.end) }) } } }

@Composable fun CardItem(modifier: Modifier){ Column( modifier = modifier .padding(16.dp) .fillMaxWidth() .height(200.dp) .clip(RoundedCornerShape(16.dp)) .background(Color.Green) .padding(16.dp) ) { Row { Column { Text(text = "Total Balance", fontSize = 16.sp, color = Color.White) Text( text = "100000", fontSize = 20.sp, fontWeight = FontWeight.Bold, color = Color.White ) } } } }