star: Align the icon with message content.

By wrapping the icon with a dummy Text widget in a Row, the Text helps
us stretch the row to the same height as a line of a message content
would have. This allows us to position the icon with respect to text,
even if a scaling factor has been applied.

Fixes #616.

Signed-off-by: Zixuan James Li <[email protected]>

Author: PIG208

lib/widgets/edit_state_marker.dart

@@ -25,11 +25,11 @@ class _SwipableMessageRowState extends State<SwipableMessageRow> {
   Widget build(BuildContext context) {
     final theme = Theme.of(context).extension<DesignVariables>()!;
 
-    // TODO(#157): fix how star marker aligns with message content
-    // Design from Figma at:
-    //   https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=813%3A28817&mode=dev .
-    var star = Padding(padding: const EdgeInsets.only(top: 5.5),
-      child: Icon(ZulipIcons.star_filled, size: 16, color: theme.starColor));
+    var star = Padding(
+      padding: const EdgeInsets.only(top: 5.5),
+      child: Row(children: [
+          const Text("", style: TextStyle(fontSize: 15)),
+          Icon(ZulipIcons.star_filled, size: 16, color: theme.starColor)]));
     final hasMarker = widget.message.editState != MessageEditState.none;
 
     return Stack(