Align text and icons to baseline, in topic-list topic items

[PIG208]

This is a follow-up to #1158.

For #1158, we align icons to the center in each topic item row. This is different from what the Figma design intended, where the icons should be aligned to the baseline.

Figma design

CZO discussion: #mobile-team > topic list item alignment @ 💬

Related issues

• InboxPage: Implement redesign #1527, since topic items there are similarly aligned.

[gnprice]

The main user-visible effect of this comes when the topic name spills onto two or three lines. In that case, in the design in Figma, the icons and unread count stay aligned with the first line of the topic name — just like in web in the left sidebar. In the design we expect to merge in #1500, the icons and unread count instead align with the vertical center of the whole multi-line topic name.

One reason aligning with the first line is preferable is that it helps to mark where one topic ends and another begins.

Implementation

The reason why it wasn't simple to implement the specified design in the first place, and therefore why we punted it to this follow-up issue instead of including in #1500, is that with baseline alignment the icons require an offset bringing them a couple of px lower in order to look visually aligned with the text. This is a solvable problem, but there doesn't seem to be a quick solution for it that Flutter supplies out of the box.

Arguably the right solution is that if the icons look wrongly aligned when aligned to baseline, that means the icon font is putting their baselines in the wrong place, and the baseline metadata in the font should be fixed. I don't know if there's an easy way to arrange for that in the pipeline we use for building the icon font (from SVG sources).

The other direction for a solution is to mimic what one would likely do in a web app: there, one would use a bit of CSS like vertical-align: 2px;. The CSS vertical-align property with a <length> value means: align to baseline, except shift up or down by the given length. Effectively it adjusts where within the element's box its baseline is considered to be.

In Flutter, I think a good API for this would look like a widget named perhaps AdjustBaseline, which takes a child widget and a double dy, and whose semantics is that at layout time it passes its constraints right through to its child and takes the same size as its child, but its baseline differs from its child's by dy. @PIG208 wrote a draft of such a widget here: #mobile-team > topic list item alignment @ 💬

I think that'd be a good widget to add to the framework upstream. There's no rush to implement this issue, so we can send it upstream first, and then use it in Zulip once it lands there. (Though definitely it'd be smart to draft the branch for using it in Zulip, relying on the draft branch to add it upstream, before actually sending the latter as a PR. That's a good strategy in general for validating that one's upstream changes do indeed solve the problem and are pleasant to use.)