Display curved button with custom color

Question

I am trying to achieve a Scrollview with buttons that have rounded corners and a custom color.

Button(shoppingListItem.text) {
  removeFromShoppingList(itemId: shoppingListItem.item_id)
}
.overlay(
  RoundedRectangle(cornerRadius: 20)
    .stroke(Color.secondary, lineWidth: 2)
    .background(
      RoundedRectangle(cornerRadius: 20, style: .continuous)
        .fill(Color("ShoppingListItemColor"))
    )
  )
)

This results in a button with rounded corners and the wanted color but no text is visible. What am I missing here?

You have added an overlay of the rounded rectangle. This gets added on top on the content it is over laying. So your rounded rectangle is covering up the text. You probably want `.background` instead of `.overlay`. — Fogmeister, Jan 24 '23 at 17:45
Formatting is really important. It allows us to easily read and understand what we're doing with our code. I will format your code and you will see... — Fogmeister, Jan 24 '23 at 17:51

score 1 · Accepted Answer · answered Jan 24 '23 at 17:50

You might be better writing your code this way...

Button(shoppingListItem.text) {
  removeFromShoppingList(itemId: shoppingListItem.item_id)
}
.overlay(
  RoundedRectangle(cornerRadius: 20)
    .stroke(Color.secondary, lineWidth: 2)
)
.background(Color("ShoppingListItemColor"))
.clipShape(RoundedRectangle(cornerRadius: 20))

In this I have moved the background out of the overlay.

So this is now built from a button with text.
The button has an overlay of just the border of a rounded rectangle.
Then the button has a background color.
And then the button is clipped by a rounded rectangle.

In your code (probably because of the lack of formatting) you had inadvertently added the background to the overlay. So you had overlaid the whole button with the background colour and covered the text.

Display curved button with custom color

1 Answers1