Flutter表情符号转换插件twemoji的使用

Twitter Emojis for Flutter，这个插件支持SVG和PNG 72x72的表情符号。

使用方法

单个表情符号的显示

使用Twemoji widget来显示单个表情符号：

Twemoji(
  emoji: '🍕',
  height: 50,
  width: 50,
)

文本中包含表情符号

使用TwemojiText widget可以将文本中的表情符号渲染为Twitter风格的表情：

TwemojiText(
  text: 'wow 💻👩‍💻👨‍💻 ',
),

使用RichText与TwemojiTextSpan

结合RichText和TwemojiTextSpan可以在富文本中渲染表情符号：

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

包含特定表情符号

默认情况下，该库支持所有表情符号。为了减少包体积，只构建应用程序需要的表情符号，可以在pubspec.yaml文件中指定所需的表情符号列表：

twemoji:
  includes: '👩‍👩‍👧‍👧👏👍'

然后运行以下命令以过滤生成资产的表情符号列表：

flutter pub run twemoji:include_emojis

示例代码

下面是一个完整的示例demo，展示了如何在Flutter应用中使用twemoji插件：

import 'dart:math' as math;

import 'package:flutter/material.dart';
import 'package:twemoji/twemoji.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) => MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const MyHomePage(),
      );
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  final _emojis = '☺️ 🍕 🍔 🌭 👩‍🍳 ✈️ 0️⃣ 1️⃣ 2️⃣ 3️⃣';

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller =
        AnimationController(vsync: this, duration: const Duration(seconds: 5))
          ..repeat();
  }

  [@override](/user/override)
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: const Text('Twemoji'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              RichText(
                text: TextSpan(
                  children: [
                    TextSpan(
                      text: '$_emojis :Device\n',
                      style: const TextStyle(
                        color: Colors.black,
                        fontSize: 20,
                      ),
                    ),
                    TwemojiTextSpan(
                      text:
                          '$_emojis :Twemoji.png\n',
                      twemojiFormat: TwemojiFormat.png,
                      style: const TextStyle(
                        color: Colors.black,
                        fontSize: 20,
                      ),
                    ),
                    TwemojiTextSpan(
                      text: '$_emojis :Twemoji.svg x 1.3\n',
                      twemojiFormat: TwemojiFormat.svg,
                      emojiFontMultiplier: 1.3,
                      style: const TextStyle(
                        color: Colors.black,
                        fontSize: 20,
                      ),
                    ),
                    TwemojiTextSpan(
                      text: '$_emojis  :Twemoji.networkSvg x 1.5\n',
                      twemojiFormat: TwemojiFormat.networkSvg,
                      emojiFontMultiplier: 1.5,
                      style: const TextStyle(
                        color: Colors.black,
                        fontSize: 20,
                      ),
                    ),
                  ],
                ),
              ),
              const TwemojiText(
                text: '💻👩‍💻👨‍💻 :auto format',
                emojiFontMultiplier: 2,
              ),
              const SizedBox(height: 20),
              AnimatedBuilder(
                animation: _controller,
                builder: (context, child) => Transform.rotate(
                  angle: _controller.value * 2 * math.pi,
                  child: SizedBox(
                    height: 105,
                    width: 105,
                    child: Stack(
                      children: List.generate(
                        4,
                        (index) => Align(
                          alignment: _getAlign(index),
                          child: RotationTransition(
                            turns: AlwaysStoppedAnimation(index * 90 / 360),
                            child: const Twemoji(
                              emoji: '🍕',
                              height: 50,
                              width: 50,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      );

  AlignmentGeometry _getAlign(int index) {
    switch (index) {
      case 0:
        return Alignment.topCenter;
      case 1:
        return Alignment.centerRight;
      case 2:
        return Alignment.bottomCenter;
      case 3:
        return Alignment.centerLeft;
      default:
        return Alignment.topCenter;
    }
  }
}