chore: optimize emoji align on mobile (#5852)

frontend/appflowy_flutter/lib/mobile/presentation/page_item/mobile_view_item.dart

@@ -260,6 +260,7 @@ class _SingleMobileInnerViewItemState extends State<SingleMobileInnerViewItem> {
         child: FlowyText.regular(
           widget.view.name,
           fontSize: 16.0,
+          figmaLineHeight: 20.0,
           overflow: TextOverflow.ellipsis,
         ),
       ),
@@ -297,12 +298,17 @@ class _SingleMobileInnerViewItemState extends State<SingleMobileInnerViewItem> {
         ? FlowyText.emoji(
             widget.view.icon.value,
             fontSize: 18.0,
+            figmaLineHeight: 20.0,
+            optimizeEmojiAlign: true,
           )
         : Opacity(
             opacity: 0.7,
             child: widget.view.defaultIcon(size: const Size.square(18)),
           );
-    return SizedBox(width: 18.0, child: icon);
+    return SizedBox(
+      width: 18.0,
+      child: icon,
+    );
   }
 
   // > button or · button

frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/text.dart

@@ -26,6 +26,8 @@ class FlowyText extends StatelessWidget {
   /// this is used to control the line height from Figma.
   final double? figmaLineHeight;
 
+  final bool optimizeEmojiAlign;
+
   const FlowyText(
     this.text, {
     super.key,
@@ -44,6 +46,7 @@ class FlowyText extends StatelessWidget {
     this.withTooltip = false,
     this.isEmoji = false,
     this.strutStyle,
+    this.optimizeEmojiAlign = false,
   });
 
   FlowyText.small(
@@ -62,6 +65,7 @@ class FlowyText extends StatelessWidget {
     this.isEmoji = false,
     this.strutStyle,
     this.figmaLineHeight,
+    this.optimizeEmojiAlign = false,
   })  : fontWeight = FontWeight.w400,
         fontSize = (Platform.isIOS || Platform.isAndroid) ? 14 : 12;
 
@@ -82,6 +86,7 @@ class FlowyText extends StatelessWidget {
     this.isEmoji = false,
     this.strutStyle,
     this.figmaLineHeight,
+    this.optimizeEmojiAlign = false,
   }) : fontWeight = FontWeight.w400;
 
   const FlowyText.medium(
@@ -101,6 +106,7 @@ class FlowyText extends StatelessWidget {
     this.isEmoji = false,
     this.strutStyle,
     this.figmaLineHeight,
+    this.optimizeEmojiAlign = false,
   }) : fontWeight = FontWeight.w500;
 
   const FlowyText.semibold(
@@ -120,6 +126,7 @@ class FlowyText extends StatelessWidget {
     this.isEmoji = false,
     this.strutStyle,
     this.figmaLineHeight,
+    this.optimizeEmojiAlign = false,
   }) : fontWeight = FontWeight.w600;
 
   // Some emojis are not supported on Linux and Android, fallback to noto color emoji
@@ -139,6 +146,7 @@ class FlowyText extends StatelessWidget {
     this.isEmoji = true,
     this.fontFamily,
     this.figmaLineHeight,
+    this.optimizeEmojiAlign = false,
   })  : fontWeight = FontWeight.w400,
         fallbackFontFamily = null;
 
@@ -176,6 +184,9 @@ class FlowyText extends StatelessWidget {
           fontFamily: fontFamily,
           fontFamilyFallback: fallbackFontFamily,
           height: lineHeight,
+          leadingDistribution: isEmoji && optimizeEmojiAlign
+              ? TextLeadingDistribution.even
+              : null,
         );
 
     if (selectable) {
@@ -194,7 +205,8 @@ class FlowyText extends StatelessWidget {
         textAlign: textAlign,
         overflow: overflow ?? TextOverflow.clip,
         style: textStyle,
-        strutStyle: (Platform.isMacOS || Platform.isLinux) & !isEmoji
+        strutStyle: ((Platform.isMacOS || Platform.isLinux) & !isEmoji) ||
+                (isEmoji && optimizeEmojiAlign)
             ? StrutStyle.fromTextStyle(
                 textStyle,
                 forceStrutHeight: true,