Complications in WidgetKit - .accessoryCorner with curved text

Hello,

I am trying out the new Watch Complications in WidgetKit and I am stuck on the widget '.accessoryCorner'.
Unfortunately, I can't find a way to create a curved text as shown in the image in the upper left corner ('HON').

Using the '.widgetLabel' does insert a curved label in the second line, but the text above it in the first line remains horizontally arranged.

Has anyone found a solution for this yet?

Thanks for the help Thomas

  • This worked for me

                    VStack(alignment: .center) {                     Image(systemName: "globe")                         .resizable()                         .aspectRatio(contentMode: .fit)                 }                 .widgetLabel("Your A Game")

                         

  • The comment above doesn't work which is for an icon and doesn't address the issue. Any updates from anyone? This is the biggest complaint on my app. Developers and users are frustrated Apple dropping the ball on this :(

Add a Comment

Accepted Reply

There is finally a solution in WatchOS 10 using the widgetCurvesContent() modifier.

var body: some View {
    Text("Hi")
        .widgetCurvesContent()
        .widgetLabel("World!")
}
  • Thank you!

Add a Comment

Replies

+1 from me too, I have also not worked out how to achieve this - I'm guessing that there is a bug or a missing modifier here to allow text to be angled.

If I understood session 10051 "Go further with Complications in WidgetKit" correctly, there is no more possibility to insert automatically curved text in this area.
Apparently only icons or symbols are still provided in this area :(

  • Disappointing if true, give Apple's built in widgets can achieve it.

  • I figure this as well. It is stated that the content is auto clipped to a circle for design uniformity. I display temperature in corner complications, using the gauge to show current temperature in daily min / max. The actual value cannot be determined from the gauge, and so displayed as curved text above the gauge. accessoryCorner's gauge's currentValueLabel can be specified, but I don't see it displayed. Displaying text in the circular area makes the content less glanceable

Add a Comment

I also have not figured out a way to migrate all the corner complications (basically 95% look like this) and filed feedback (FB11192958). Another issue is that the gauge inside the widgetLabel ignores the gradient so it's impossible to get even close to the design shown by all the weather widgets.

  • Yep I have the same two issues blocking me from recreating that style of widget. Let me know if you hear anything on the feedback!

  • Will do!

  • So I got an answer from a framework engineer on Twitter and it seems that the curved text in the corner won't be supported in watchOS 9. We're supposed to work around by setting a font like .system(size: 28, weight: .semibold, design: .rounded) to get a similar text size but it won't be curved. The other "issue" with the gradient gauge was a misunderstanding of mine: I thought it's only possible to tint it in combination with a gauge style but we can of course just add a .tint(gradient) modifier

This is still an issue with watchOS 9.1 / Xcode 14.1. It gets truncated no matter what I do, I can't put any reasonable text in there not even a time or count down! It looks silly with so much wasted space around it, not sure why Apple is saying they won't support it.

I really want to migrate to WidgetKit for complications but issues like this keep holding me back. Is there still no way to get corner text working like the original post image!?

Right, I've submitted 2 subtly different feedback for this. One for existing SDK and one for WatchOS 10. If this isn't resolved by WatchOS 10 I'm going to be in big trouble with my users because I need to implement WidgetKit to be in the Smart Stack. But If I implement it as is, I'll loose one of my most popular Complications which will really upset users. Stuck between a rock and a hard place.... plus I did confirm in a WWDC23 lab that WidgetKit implementation is all or nothing, you cannot run ClockKit & Widgetkit complications on the same Watch. Here are the feedbacks, FB12331689 & FB12331662 🙏 for a fix

  • Up vote.

  • Proposal: Simple Text("...") in corner should be always rendered as a curved text. If you need a regular text style, wrap it with a VStack or something.

Add a Comment

There is finally a solution in WatchOS 10 using the widgetCurvesContent() modifier.

var body: some View {
    Text("Hi")
        .widgetCurvesContent()
        .widgetLabel("World!")
}
  • Thank you!

Add a Comment