Flutter动态表情动画插件dart_animated_emoji的使用

Flutter动态表情动画插件dart_animated_emoji的使用

dart_animated_emoji 是一个纯 Dart 实现的 Noto 动态表情字体，用于渲染动画。它不依赖于 Flutter。

特性

• 渲染为 Lottie、webp 或 gif 格式
• 使用预生成的表情或在应用中生成自定义集合

使用方法

使用预生成的实现

// 检查特定的表情符号是否受支持
final isThumbsUpSupported = AnimatedEmoji.isEmojiSupported('👍🏽');

// 搜索带有标签的表情符号
final unicorn = AnimatedEmoji.all.firstWhere(
    (element) => element.tags.contains('unicorn'),
);

// 使用 lottie 包将其渲染为 Flutter 小部件
LottieBuilder.memory(
    Uint8List.fromList(
        unicorn.lottieAnimation.codeUnits,
    ),
);

有关 Flutter 渲染的更多文档，请查看示例或 lottie 包。

为应用生成自定义输出

# 添加开发依赖
dart pub add --dev dart_animated_emoji

# 直接将表情符号生成到项目中
dart run dart_animated_emoji:generator lib/generated/my_emojis/my_emojis.g.dart

# 可选地指定格式
dart run dart_animated_emoji:generator lib/generated/my_emojis/my_emojis.g.dart webp # 支持的格式：lottie（默认）、avif、webp、gif

# 获取更多信息
dart run dart_animated_emoji:generator --help

额外信息

本项目与 Noto 作者没有任何隶属关系。Noto Emoji Animated 字体按 CC BY-4.0 许可。

示例代码

以下是完整的示例代码，展示了如何在 Flutter 应用中使用 dart_animated_emoji 插件：

import 'dart:typed_data';

import 'package:dart_animated_emoji/dart_animated_emoji.dart';
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个小部件是你的应用的根
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.pink),
        useMaterial3: true,
      ),
      home: const AnimationHomePage(),
    );
  }
}

class AnimationHomePage extends StatefulWidget {
  const AnimationHomePage({super.key});

  [@override](/user/override)
  State<AnimationHomePage> createState() => _AnimationHomePageState();
}

class _AnimationHomePageState extends State<AnimationHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('动画'),
      ),
      body: GridView.builder(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
        itemCount: AnimatedEmoji.all.length,
        itemBuilder: (context, index) {
          return Center(
            child: SizedBox.square(
              dimension: 128,
              child: LottieBuilder.memory(
                Uint8List.fromList(
                  AnimatedEmoji.all[index].lottieAnimation.codeUnits,
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}