emoji [nfc]: Add reusable EmojiWidget; use it in ReactionChip

There are several places where we switch on EmojiDisplay, mostly
with TODOs to factor the switch out to something central. Here's a
widget to accomplish that factoring, used first in ReactionChip.

Author: chrisbobbe

lib/widgets/emoji.dart

@@ -5,6 +5,97 @@ import '../api/model/model.dart';
 import '../model/emoji.dart';
 import 'content.dart';
 
+/// A widget showing an emoji.
+class EmojiWidget extends StatelessWidget {
+  const EmojiWidget({
+    super.key,
+    required this.emojiDisplay,
+    required this.squareDimension,
+    this.squareDimensionScaler = TextScaler.noScaling,
+    this.imagePlaceholderStyle = EmojiImagePlaceholderStyle.square,
+    this.neverAnimateImage = false,
+    this.buildCustomTextEmoji,
+  });
+
+  final EmojiDisplay emojiDisplay;
+
+  /// The base width and height to use for the emoji square.
+  ///
+  /// This will be scaled by [squareDimensionScaler].
+  ///
+  /// This is ignored when using the plain-text emoji style.
+  final double squareDimension;
+
+  /// A [TextScaler] to apply to [squareDimension].
+  ///
+  /// Defaults to [TextScaler.noScaling].
+  ///
+  /// This is ignored when using the plain-text emoji style.
+  final TextScaler squareDimensionScaler;
+
+  final EmojiImagePlaceholderStyle imagePlaceholderStyle;
+
+  /// Whether to show an animated emoji in its still (non-animated) variant
+  /// only, even if device settings permit animation.
+  ///
+  /// Defaults to false.
+  final bool neverAnimateImage;
+
+  /// An optional callback to specify a custom plain-text emoji style.
+  ///
+  /// If this is not passed, a simple [Text] widget with no added styling
+  /// is used.
+  final Widget Function()? buildCustomTextEmoji;
+
+  Widget _buildTextEmoji() {
+    return buildCustomTextEmoji?.call()
+      ?? Text(textEmojiForEmojiName(emojiDisplay.emojiName));
+  }
+
+  ImageErrorWidgetBuilder _getImageErrorBuilder(double effectiveSize) {
+    return (_, _, _) => switch (imagePlaceholderStyle) {
+      EmojiImagePlaceholderStyle.square => SizedBox.square(dimension: effectiveSize),
+      EmojiImagePlaceholderStyle.nothing => SizedBox.shrink(),
+      EmojiImagePlaceholderStyle.text => _buildTextEmoji(),
+    };
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final effectiveSquareDimension = squareDimensionScaler.scale(squareDimension);
+
+    final emojiDisplay = this.emojiDisplay;
+    return switch (emojiDisplay) {
+      ImageEmojiDisplay() => ImageEmojiWidget(
+        emojiDisplay: emojiDisplay,
+        size: squareDimension,
+        textScaler: squareDimensionScaler,
+        errorBuilder: _getImageErrorBuilder(effectiveSquareDimension),
+        neverAnimate: neverAnimateImage),
+      UnicodeEmojiDisplay() => UnicodeEmojiWidget(
+        size: squareDimension,
+        emojiDisplay: emojiDisplay),
+      TextEmojiDisplay() => _buildTextEmoji(),
+    };
+  }
+}
+
+/// In [EmojiWidget], how to present an image emoji when we don't have the image.
+enum EmojiImagePlaceholderStyle {
+  /// A square of [EmojiWidget.squareDimension]
+  /// scaled by [EmojiWidget.squareDimensionScaler].
+  square,
+
+  /// A [SizedBox.shrink].
+  nothing,
+
+  /// A plain-text emoji.
+  ///
+  /// See [EmojiWidget.buildCustomTextEmoji] for how plain-text emojis are
+  /// styled.
+  text,
+}
+
 class UnicodeEmojiWidget extends StatelessWidget {
   const UnicodeEmojiWidget({
     super.key,
@@ -91,7 +182,6 @@ class UnicodeEmojiWidget extends StatelessWidget {
   }
 }
 
-
 class ImageEmojiWidget extends StatelessWidget {
   const ImageEmojiWidget({
     super.key,

lib/widgets/emoji_reaction.dart

@@ -224,22 +224,14 @@ class ReactionChip extends StatelessWidget {
       emojiName: emojiName,
     ).resolve(store.userSettings);
 
-    final emoji = switch (emojiDisplay) {
-      UnicodeEmojiDisplay() => UnicodeEmojiWidget(
-        size: _squareEmojiSize,
-        textScaler: _squareEmojiScalerClamped(context),
-        emojiDisplay: emojiDisplay),
-      ImageEmojiDisplay() => ImageEmojiWidget(
-        size: _squareEmojiSize,
-        // Unicode and text emoji get scaled; it would look weird if image emoji didn't.
-        textScaler: _squareEmojiScalerClamped(context),
-        emojiDisplay: emojiDisplay,
-        errorBuilder: (context, _, _) => _TextEmoji(
-          emojiName: emojiName, selected: selfVoted),
-      ),
-      TextEmojiDisplay() => _TextEmoji(
+    final emoji = EmojiWidget(
+      emojiDisplay: emojiDisplay,
+      squareDimension: _squareEmojiSize,
+      squareDimensionScaler: _squareEmojiScalerClamped(context),
+      imagePlaceholderStyle: EmojiImagePlaceholderStyle.text,
+      buildCustomTextEmoji: () => _TextEmoji(
         emojiName: emojiName, selected: selfVoted),
-    };
+    );
 
     Widget result = Material(
       color: backgroundColor,