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 zulip#616.

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

Author: PIG208

lib/widgets/edit_state_marker.dart

@@ -60,11 +60,11 @@ class _SwipableMessageRowState extends State<SwipableMessageRow> with TickerProv
   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;
 
     final content = Stack(
@@ -185,7 +185,7 @@ class EditStateMarker extends StatelessWidget {
     return ConstrainedBox(
       constraints: BoxConstraints(maxWidth: _width),
       child: Container(
-        margin: EdgeInsets.only(top: 4, left: lerpDouble(0, 10, _animationProgress)!),
+        margin: EdgeInsets.only(top: 5.5, left: lerpDouble(0, 10, _animationProgress)!),
         clipBehavior: Clip.hardEdge,
         decoration: BoxDecoration(
           borderRadius: BorderRadius.circular(2),