Flutter表情反馈插件flutter_emoji_feedback的使用

简介

flutter_emoji_feedback 是一个完全可定制的小部件，用于从用户那里获取反馈。它可以帮助你了解用户的感受、评估他们的体验等。

📺 最新功能

现在可以使用动画Lottie文件（仅限JSON文件）作为表情预设，或者使用提供的 notoAnimatedEmojis 预设。（参见 PR #3）

🚀 开始使用

从pub安装

flutter pub add flutter_emoji_feedback

📔 使用方法

导入包

import 'package:flutter_emoji_feedback/flutter_emoji_feedback.dart';

示例代码

以下是一个完整的示例应用程序，展示了如何使用 flutter_emoji_feedback 插件：

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

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Example App',
      home: HomePage(),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

final emojiPresets = {
  'notoAnimatedEmojis': notoAnimatedEmojis,
  'classicEmojiPreset': classicEmojiPreset,
  'threeDEmojiPreset': threeDEmojiPreset,
  'handDrawnEmojiPreset': handDrawnEmojiPreset,
};

class _HomePageState extends State<HomePage> {
  int? rating;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: ListView(
            children: [
              ...emojiPresets.entries.map((entry) => Column(
                    children: [
                      Text(entry.key),
                      EmojiFeedback(
                        initialRating: 3,
                        onChangeWaitForAnimation: true,
                        emojiPreset: entry.value,
                        labelTextStyle: Theme.of(context)
                            .textTheme
                            .bodySmall
                            ?.copyWith(fontWeight: FontWeight.w400),
                        onChanged: (value) {
                          setState(() => rating = value);
                          // 显示SnackBar
                          ScaffoldMessenger.of(context)
                            ..clearSnackBars()
                            ..showSnackBar(SnackBar(content: Text('$value')));
                        },
                      )
                    ],
                  )),
              Column(
                children: [
                  const Text("Custom preset builder"),
                  EmojiFeedback(
                    initialRating: 3,
                    onChangeWaitForAnimation: true,
                    presetBuilder: (p0, p1, p2) => const Icon(Icons.star),
                    labelTextStyle: Theme.of(context)
                        .textTheme
                        .bodySmall
                        ?.copyWith(fontWeight: FontWeight.w400),
                    onChanged: (value) {
                      setState(() => rating = value);
                      // 显示SnackBar
                      ScaffoldMessenger.of(context)
                        ..clearSnackBars()
                        ..showSnackBar(SnackBar(content: Text('$value')));
                    },
                  )
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

参数说明

🎨 定义预设

你可以轻松地使用 StaticEmojiPreset 和 AnimatedEmojiPreset 创建预设，它们保存了表情。

// 定义静态表情预设使用SVG文件
// 替换 `image` 为你的SVG文件路径
const myStaticEmojiPreset = StaticEmojiPreset([
  StaticEmoji(
    image: 'assets/images/emoji1.svg',
    value: 1,
  ),
  StaticEmoji(
    image: 'assets/images/emoji2.svg',
    value: 2,
  ),
  StaticEmoji(
    image: 'assets/images/emoji3.svg',
    value: 3,
  ),
  StaticEmoji(
    image: 'assets/images/emoji4.svg',
    value: 4,
  ),
  StaticEmoji(
    image: 'assets/images/emoji5.svg',
    value: 5,
  ),
]);

// 定义动画表情预设使用Lottie文件
// 替换 `animation` 为你的Lottie文件路径
const myAnimatedEmojiPreset = AnimatedEmojiPreset([
  AnimatedEmoji(
    animation: 'assets/animations/emoji1.json',
    value: 1
  ),
  AnimatedEmoji(
    animation: 'assets/animations/emoji2.json',
    value: 2
  ),
  AnimatedEmoji(
    animation: 'assets/animations/emoji3.json',
    value: 3
  ),
  AnimatedEmoji(
    animation: 'assets/animations/emoji4.json',
    value: 4
  ),
  AnimatedEmoji(
    animation: 'assets/animations/emoji5.json',
    value: 5,
  ),
]);

📝 许可证

本项目遵循MIT许可证 - 详情请参阅 LICENSE 文件。

📄 更新日志

详情请参阅 CHANGELOG.md。

📄 贡献

贡献是使开源社区成为学习、启发和创造的绝佳场所的重要因素。任何贡献都 非常感谢。

1. Fork 项目
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 提交Pull Request

📄 贡献者

• @stevenosse
• @Turtlepaw

📄 致谢

• flutter_svg
• collection
• lottie

Attribution

本项目使用了 Animated Noto Emoji，其许可协议为 Creative Commons Attribution 4.0 International License (CC BY 4.0)。

© Google LLC. Licensed under CC BY 4.0.

Sponsor

如果你觉得这个项目有用，你可以 赞助我。

或者你可以

希望这篇文档对你有帮助！如果你有任何问题或需要进一步的帮助，请随时提问。