emoji: Ensure consistent height for text-only list items

Previously, text-only emoji rows in the emoji picker and autocomplete
lists were shorter than rows with image emoji, causing layout
inconsistency.

This commit fixes the layout by conditionally adding a `SizedBox`
spacer for text-only items. The spacer's height is set to match the
total height of a padded image glyph, ensuring all rows have a
consistent height without adding unwanted horizontal padding.

This change is applied to both `EmojiPickerListEntry` and
`_EmojiAutocompleteItem`. The corresponding regression tests are updated
to verify that the height of a text-only item is identical to an
image-based item.

Fixes #1587.

Author: loveucifer

lib/widgets/autocomplete.dart

@@ -349,7 +349,7 @@ class _EmojiAutocompleteItem extends StatelessWidget {
         ImageEmojiWidget(size: _size, emojiDisplay: emojiDisplay),
       UnicodeEmojiDisplay() =>
         UnicodeEmojiWidget(size: _size, emojiDisplay: emojiDisplay),
-      TextEmojiDisplay() => null, // The text is already shown separately.
+      TextEmojiDisplay() => null,
     };
 
     final label = candidate.aliases.isEmpty
@@ -367,11 +367,12 @@ class _EmojiAutocompleteItem extends StatelessWidget {
     return Padding(
       padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
       child: Row(children: [
-        if (glyph != null) ...[
+        if (glyph != null)
           Padding(padding: const EdgeInsets.all(6),
-            child: glyph),
-          const SizedBox(width: 6),
-        ],
+            child: glyph)
+        else
+          const SizedBox(height: 36.0, width: 0),
+        const SizedBox(width: 6),
         Expanded(
           child: Text(
             style: TextStyle(fontSize: 17, height: 18 / 17,

lib/widgets/emoji_reaction.dart

@@ -563,7 +563,7 @@ class EmojiPickerListEntry extends StatelessWidget {
         ImageEmojiWidget(size: _emojiSize, emojiDisplay: emojiDisplay),
       UnicodeEmojiDisplay() =>
         UnicodeEmojiWidget(size: _emojiSize, emojiDisplay: emojiDisplay),
-      TextEmojiDisplay() => null, // The text is already shown separately.
+      TextEmojiDisplay() => null,
     };
 
     final label = emoji.aliases.isEmpty
@@ -583,7 +583,9 @@ class EmojiPickerListEntry extends StatelessWidget {
           if (glyph != null)
             Padding(
               padding: const EdgeInsets.all(10),
-              child: glyph),
+              child: glyph)
+          else
+            const SizedBox(height: 40.0, width: 0),
           Flexible(child: Text(label,
             maxLines: 2,
             overflow: TextOverflow.ellipsis,
@@ -594,4 +596,4 @@ class EmojiPickerListEntry extends StatelessWidget {
         ]),
       ));
   }
-}
+}

test/widgets/autocomplete_test.dart

@@ -372,6 +372,42 @@ void main() {
       expected ? displaySubject.findsOne(): displaySubject.findsNothing();
     }
 
+   testWidgets('text emoji autocomplete item must have correct height', (tester) async {
+      // Regression test for #1587
+      final composeInputFinder = await setupToComposeInput(tester);
+
+      await store.handleEvent(RealmEmojiUpdateEvent(id: 1, realmEmoji: {
+        '1': eg.realmEmojiItem(emojiCode: '1', emojiName: 'an_image_emoji'),
+      }));
+      await tester.pump();
+
+      // TODO(#226): Remove this extra edit when this bug is fixed.
+      await tester.enterText(composeInputFinder, ':an_imag');
+      await tester.enterText(composeInputFinder, ':an_image');
+      await tester.pumpAndSettle();
+
+      final imageItemFinder = find.widgetWithText(InkWell, 'an_image_emoji');
+      check(imageItemFinder).findsOne();
+      final imageItemHeight = tester.getSize(imageItemFinder).height;
+
+      // TODO(#226): Remove this extra edit when this bug is fixed.
+      await store.handleEvent(UserSettingsUpdateEvent(id: 1,
+        property: UserSettingName.emojiset,
+        value: Emojiset.text));
+
+      await tester.enterText(composeInputFinder, ':an_imag');
+      await tester.enterText(composeInputFinder, ':an_image');
+      await tester.pumpAndSettle();
+
+      final textItemFinder = find.widgetWithText(InkWell, 'an_image_emoji');
+      check(textItemFinder).findsOne();
+      final textItemHeight = tester.getSize(textItemFinder).height;
+
+      check(textItemHeight).isCloseTo(imageItemHeight, 1.0);
+
+      debugNetworkImageHttpClientProvider = null;
+    });
+
     testWidgets('show, update, choose', (tester) async {
       final composeInputFinder = await setupToComposeInput(tester);
       final store = await testBinding.globalStore.perAccount(eg.selfAccount.id);

test/widgets/emoji_reaction_test.dart

@@ -556,6 +556,32 @@ void main() {
         debugNetworkImageHttpClientProvider = null;
       });
 
+      testWidgets('text emoji list items must have correct height', (tester) async {
+        // Regression test for #1587.
+        final message = eg.streamMessage();
+        await setupEmojiPicker(tester, message: message, narrow: TopicNarrow.ofMessage(message));
+
+        // Find a list entry and get its height with the default image-based emoji.
+        final listEntryFinder = find.byWidgetPredicate(
+          (w) => w is EmojiPickerListEntry && w.emoji.emojiName == 'zzz');
+        await tester.ensureVisible(listEntryFinder);
+        final imageRenderBox = tester.renderObject<RenderBox>(listEntryFinder);
+        final imageHeight = imageRenderBox.size.height;
+
+        // Change the setting to text-only emoji.
+        await store.handleEvent(UserSettingsUpdateEvent(id: 1,
+          property: UserSettingName.emojiset,
+          value: Emojiset.text));
+        await tester.pumpAndSettle();
+
+        // Find the same list entry again and check that its height has not changed.
+        await tester.ensureVisible(listEntryFinder);
+        final textRenderBox = tester.renderObject<RenderBox>(listEntryFinder);
+        check(textRenderBox.size.height).isCloseTo(imageHeight, 1.0);
+
+        debugNetworkImageHttpClientProvider = null;
+      });
+
       testWidgets('with bottom view padding', (tester) async {
         await prepare(tester, viewPadding: FakeViewPadding(bottom: 10));