FlutterでTwemoji(Twitter絵文字)をつかう

ほそぼそと作ってるゲームアプリで、
絵文字に対応したときの備忘録(*´ω｀*)

🚀🚀アップデートDONE🚀🚀
1. 絵文字でステージを作成できるようになりました✨
2. ランキング数を10から30に変更しました✨
ほか、いくつかの改善や修正も😊#マグロ探し #indiedev #ゲーム開発 #個人開発 https://t.co/9E4ikyzU0s
— きらぷか@スプシAPI化&積読のサービス運営中🔥 (@kira_puka) June 16, 2024

twemoji_v2を使うと表示された(*´ω｀*)

なお、Twemojiの本家は、こちら

jdecked/twemoji: Emoji for everyone.

執筆時点で15.1.0だけど、
twemoji_v2では、Twemojiのv14.1.2が採用されている

使い方

使い方はシンプル

// 絵文字と文字の混在の場合
TwemojiText(
  text: 'wow 💻👩<200d>💻👨<200d>💻 ',
),

// 絵文字1文字の場合
Twemoji(
  emoji: '🍕',
  height: 50,
  width: 50,
)

// RichTextにも対応
RichText(
  text: TwemojiTextSpan(
  text: 'Text 🍕🍔🌭🍿🧂🥓🥨🥐🍞🥞🥞',
  style: Theme.of(context).textTheme.headline6,
  ),
)

以上!! 簡単(*´ω｀*)

旧twemoji

twemojiは、こっちがオリジナルだけど、
flutter_svg: ^1.0.0なので、最新のFlutterだと使えない...

hadi-codes/twemoji: Twitter Emojis for Flutter, this package supports svg and png 72x72 emojis

これをforkして、flutter_svg: ^2.0.4にしてくれたのがtwemoji_v2

Twemojiを読み込む方法

twemoji_v2の内部では、こんな感じで、
本家twemojiのpng/svgを読み込んでいる。

class Twemoji extends StatelessWidget {
  const Twemoji(/*..*/): super(key: key);
  final String emoji;
  final double? height, width;
  final BoxFit? fit;
  final TwemojiFormat twemojiFormat;
  final List<FitzpatrickType> fitzpatrickTypes;

  @override
  Widget build(BuildContext context) {
    // ... 略
    switch (twemojiFormat) {
      case TwemojiFormat.png:
        return Image.asset(
          'assets/png/$unicode.png',
          fit: fit,
          height: width,
          width: height,
          package: 'twemoji_v2',
        );
      case TwemojiFormat.svg:
        return SvgPicture.asset(
          'assets/svg/$unicode.svg',
          height: height,
          width: width,
          fit: fit ?? BoxFit.contain,
          package: 'twemoji_v2',
        );
      case TwemojiFormat.networkSvg:
        return SvgPicture.network(
          'https://abs.twimg.com/emoji/v2/svg/$unicode.svg',
          height: height,
          width: width,
          fit: fit ?? BoxFit.contain,
        );
    }
  }
}