emoji: Use "Apple Color Emoji" font on iOS/macOS for UnicodeEmojiWidget

Some unicode characters, like U+2764 (❤) or U+00AE (®) can
have glyphs in non-Emoji fonts, resulting in incorrect
rendering of such characters, where we specifically want an
emoji to be displayed.

So, explicitly mention "Apple Color Emoji" to be the font used on
iOS/macOS for displaying the unicode emoji.

This resolves part of #1104, namely for reaction chips
and autocomplete results.

[greg: wrote test]

Fixes-partly: #1104

Author: rajveermalviya

lib/widgets/emoji.dart

@@ -50,8 +50,8 @@ class UnicodeEmojiWidget extends StatelessWidget {
 
       case TargetPlatform.iOS:
       case TargetPlatform.macOS:
-        // We expect the font "Apple Color Emoji" to be used. There are some
-        // surprises in how Flutter ends up rendering emojis in this font:
+        // We use the font "Apple Color Emoji". There are some surprises in how
+        // Flutter ends up rendering emojis in this font:
         // - With a font size of 17px, the emoji visually seems to be about 17px
         //   square. (Unlike on Android, with Noto Color Emoji, where a 14.5px font
         //   size gives an emoji that looks 17px square.) See:
@@ -71,7 +71,9 @@ class UnicodeEmojiWidget extends StatelessWidget {
           SizedBox(height: boxSize, width: boxSize),
           PositionedDirectional(start: 0, child: Text(
             textScaler: textScaler,
-            style: TextStyle(fontSize: size),
+            style: TextStyle(
+              fontFamily: 'Apple Color Emoji',
+              fontSize: size),
             strutStyle: StrutStyle(fontSize: size, forceStrutHeight: true),
             emojiDisplay.emojiUnicode)),
         ]);

test/widgets/emoji_reaction_test.dart

@@ -18,6 +18,7 @@ import '../flutter_checks.dart';
 import '../model/binding.dart';
 import '../model/test_store.dart';
 import '../test_images.dart';
+import 'content_test.dart';
 import 'test_app.dart';
 import 'text_test.dart';
 
@@ -259,6 +260,23 @@ void main() {
       .isSameColorAs(EmojiReactionTheme.dark().bgUnselected);
   });
 
+  testWidgets('use emoji font', (tester) async {
+    await prepare();
+    await store.addUser(eg.selfUser);
+    await setupChipsInBox(tester, reactions: [
+      Reaction.fromJson({
+        'user_id': eg.selfUser.userId,
+        'emoji_name': 'heart', 'emoji_code': '2764', 'reaction_type': 'unicode_emoji'}),
+    ]);
+
+    check(mergedStyleOf(tester, '\u{2764}')).isNotNull()
+      .fontFamily.equals(switch (defaultTargetPlatform) {
+        TargetPlatform.android => 'Noto Color Emoji',
+        TargetPlatform.iOS => 'Apple Color Emoji',
+        _ => throw StateError('unexpected platform in test'),
+      });
+  }, variant: const TargetPlatformVariant({TargetPlatform.android, TargetPlatform.iOS}));
+
   // TODO more tests:
   // - Tapping a chip does the right thing
   // - When an image emoji fails to load, falls back to :text_emoji: