Flutter表情符号渲染插件flutter_twemoji的使用

Flutter表情符号渲染插件flutter_twemoji的使用

插件介绍

基于 jdecked的twemoji (v15.1.0)的分支，此插件提供了渲染表情符号的功能。

使用方法

显示单个表情符号

使用 Twemoji Widget 来显示单独的表情符号。

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

渲染带有表情符号的文本

TwemojiText Widget 允许你渲染带有嵌入式 Twemoji 的的文本。

TwemojiText(
  text: 'Flutter is awesome 🎉',
)

创建带表情符号的富文本

结合 TwemojiTextSpan 和 RichText 可以创建包含表情符号的富文本内容。

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

只包括特定的表情符号

默认情况下，该包会包含所有 twemojis。为了减少整体 bundle 大小，可以在 pubspec.yaml 中指定要包含的表情符号。

flutter_twemoji:
  includes: '🍕🍔🌭🍿🧂增资.nio'

然后运行 dart run flutter_twemoji:include_emojis 来过滤生成资产。

示例代码

import 'dart:math' as math;

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) => MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        debugShowCheckedModeBanner: false,
        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 = '🇫 🇱 🇺 🇹 🇹 🇪 🇷 📱 💙 🚀 🫨';

  [@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('flutter_twemoji'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              RichText(
                text: TextSpan(
                  children: [
                    TextSpan(
                      text: '$_emojis\nDefault Device Emoji\n\n',
                      style: const TextStyle(
                        color: Colors.black,
                        fontSize: 115,
                      ),
                    ),
                    TwemojiTextSpan(
                      text: '$_emojis\nTwemojiFormat.png\n\n',
                      twemojiFormat: TwemojiFormat.png,
                      style: const TextStyle(
                        color: Colors.black,
                        fontSize: 115,
                      ),
                    ),
                    TwemojiTextSpan(
                      text: '$_emojis\nTwemojiFormat.svg (x1.3)\n\n',
                      twemojiFormat: TwemojiFormat.svg,
                      emojiFontMultiplier: 1.3,
                      style: const TextStyle(
                        color: Colors.black,
                        fontSize: 115,
                      ),
                    ),
                  ],
                ),
              ),
              const TwemojiText(
                text: 'This is some text 💬 with Twemoji! 🚀',
              ),
              const TwemojiText(
                text: 'Even with support for Fitzpatrick modifiers! 👩👨🏿‍👩🏼‍',
              ),
              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;
    }
  }
}