Flutter表情评分插件emoji_rating_bar的使用

Animated feedback and mood rating bar

emoji_rating_bar 是一个平滑动画评分条插件，适用于客户和服务反馈。它配备了可定制的表情和情绪条。您可以创建独特的评分条，使用自定义表情、文本、评分、大小和动画。用户可以轻松更改未选中项的颜色，从而获得更好的体验。

Usage

在您的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  emoji_rating_bar: ^<latest-version>

Feedback Rating Bar

EmojiRatingBar()

Mood Rating Bar

EmojiRatingBar(
  ratingBarType: RatingBarType.mood
)

Customise Rating Bar

您可以通过向小部件提供额外属性来自定义评分条。例如：

EmojiRatingBar(
  rating: 2,
  onRateChange: (rating) {
    print(rating);
  },
  isReadOnly: false,
  spacing: 15,
  size: 40,
  selectedSize: 60,
  isShowTitle: true,
  isShowDivider: true,
  titleStyle: TextStyle(
    color: Colors.grey,
    fontSize: 8,
  ),
  selectedTitleStyle: TextStyle(
    color: Colors.black,
    fontSize: 12,
  ),
  animationDuration: Duration(milliseconds: 500),
  animationCurve: Curves.easeInOut,
  ratingBarType: RatingBarType.feedback,
  applyColorFilter: true
)

Create Custom list

要创建包含自定义图像的自定义表情列表，可以使用以下格式：

[
  EmojiData(icStrong, "Strong", isPackageImg: true),  // 如果使用包资产图像，必须将 isPackageImg 设置为 true
  EmojiData(
    "assets/ic_delighted.png",   // 项目资产图像
    "Delighted"
  )
]

示例代码

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

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

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.orange,
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: SingleChildScrollView(
            child: Column(
              children: [
                const Text("How was the our service?"),
                const SizedBox(height: 30),
                const EmojiRatingBar(
                  rating: 3,
                ),
                const SizedBox(height: 80),
                const Text("How are you feeling?"),
                const SizedBox(height: 30),
                const EmojiRatingBar(
                  ratingBarType: RatingBarType.mood,
                  rating: 3,
                ),
                const SizedBox(height: 80),
                const Text("Customise your rating bar"),
                const SizedBox(height: 30),
                EmojiRatingBar(
                  rating: 2,
                  isShowTitle: false,
                  applyColorFilter: false,
                  onRateChange: (rating) {
                    debugPrint("Current rating $rating");
                  },
                  list: [
                    EmojiData(icStrong, "Strong", isPackageImg: true),
                    EmojiData(
                      "assets/ic_delighted.png",
                      "Delighted",
                    )
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的 Flutter 应用，其中包括三个不同的 EmojiRatingBar 小部件：

1. 服务反馈评分条
2. 情绪反馈评分条
3. 自定义评分条

每个评分条都可以根据需要进行自定义，以满足您的应用需求。