I was following this document to find out how can use the decoupling api ConstraintLayout in Compose but unfortunately failed to build and run Here's the error I got
I can't figure out why it's complaining. I tried cursor to help me find a solution, but the document isn't doing it this way and said I have to define the actual string constants that will be used as references in the constraint set like so:
// Add these constants at the top of the file, outside any function
private const val imgProfile = "imgProfile"
private const val txtName = "txtName"
private const val txtCountry = "txtCountry"
private const val rowStats = "rowStats"
private const val btnFollow = "btnFollow"
private const val btnDM = "btnDM"
My code:
@Composable
fun ProfilePage(modifier: Modifier){
Card(elevation = CardDefaults.cardElevation(defaultElevation = 6.dp),
modifier = Modifier.fillMaxSize().padding(top = 220.dp, bottom = 220.dp, start = 16.dp, end = 16.dp)
) {
BoxWithConstraints() {
val constraints = if (minWidth < 600.dp) {
verticalConstraints(margin = 16.dp)
} else {
verticalConstraints(margin = 16.dp)
}
ConstraintLayout(constraints) {
Image(
painter = painterResource(id = R.drawable._84b21894c2453a6b598d23e62ff551c),
contentDescription = "Shizba",
modifier = Modifier
.size(100.dp)
.clip(CircleShape)
.border(width = 2.dp, shape = CircleShape, color = Color.Red)
.layoutId("imgProfile"),
contentScale = ContentScale.Crop
)
Text(
text = "Shiba Inu",
modifier = Modifier.layoutId("txtName")
)
Text(
"Japan",
modifier = Modifier.layoutId("txtCountry")
)
Row(
horizontalArrangement = Arrangement.SpaceEvenly,
modifier = Modifier
.fillMaxWidth() // it should take the entire width, so no need to link it to left or the right
.padding(16.dp)
.layoutId("rowStats")
) {
ProfileStats("350", "Followers")
ProfileStats("200", "Following")
ProfileStats("50", "Posts")
}
Button(
onClick = {},
modifier = Modifier.layoutId("btnFollow")
) {
Text(text = "Follow User")
}
Button(
onClick = {},
modifier = Modifier.layoutId("btnDM")
) {
Text(text = "Send Message")
}
}
}
}
}
@Composable
fun ProfileStats(count: String, title: String){
Column(horizontalAlignment = Alignment.CenterHorizontally)
{
Text(text = count, fontWeight = FontWeight.Bold)
Text(text = title)
}
}
private fun verticalConstraints(margin:Dp): ConstraintSet{
return ConstraintSet{
val guideline = createGuidelineFromTop(0.1f)
val imgProfile = createRefFor(imgProfile)
val txtName = createRefFor(txtName)
val txtCountry = createRefFor(txtCountry)
val rowStats = createRefFor(rowStats)
val btnFollow = createRefFor(btnFollow)
val btnDM = createRefFor(btnDM)
constrain(imgProfile){
top.linkTo(parent.top)
start.linkTo(parent.start)
end.linkTo(parent.end)
}
constrain(txtName){
top.linkTo(imgProfile.bottom)
start.linkTo(parent.start)
end.linkTo(parent.end)
}
constrain(txtCountry){
top.linkTo(txtName.bottom)
start.linkTo(parent.start)
end.linkTo(parent.end)
}
constrain(rowStats){
top.linkTo(txtCountry.bottom)
}
constrain(btnFollow){
top.linkTo(rowStats.bottom, margin = margin)
start.linkTo(parent.start)
end.linkTo(btnDM.start)
width = Dimension.wrapContent
}
constrain(btnDM){
top.linkTo(rowStats.bottom, margin = margin)
start.linkTo(btnFollow.end)
end.linkTo(parent.end)
width = Dimension.wrapContent
}
}
}
You should create references for strings. In the verticalConstraints
function replace
val imgProfile = createRefFor(imgProfile)
with
val imgProfile = createRefFor("imgProfile")
Repeat for the rest of the references.