AnnotatedString is why you don’t need three Text composables in a Row

Halfway through the series, and the component you’ve used most has a second API almost nobody reaches for.

Day 50 of 100 — the halfway mark, and the start of the text pillar. Text is the composable you've written most, and it has a second parameter overload that solves a problem people usually solve with layout.

The case this post is about

One sentence, assembled from three composables because the middle word is bold:

Row {
    Text("Signed in as ")
    Text(userName, fontWeight = FontWeight.Bold)
    Text(". Not you?")
}


It renders correctly on a phone in English. It does not wrap — the three pieces are laid out horizontally, so a long username pushes ". Not you?" off the edge rather than onto a second line. A screen reader announces three separate texts. A translator receives three fragments and no sentence.
One string with a styled range does all three correctly. This post follows that sentence, because the API that fixes it is the second one on the component everybody has used most, and almost nobody reaches for it.

The symptom

A sentence assembled out of three composables:

Row {
    Text("Signed in as ")
    Text(userName, fontWeight =…