flutter_emoji_feedback

A fully customizable widget to receive feedback from your users. Useful to get the user's mood, evaluate their experience, and more!

📺 What's new?

You can now use animated lottie files (json files only) for emoji presets, or the provided notoAnimatedEmojis preset. (see #3)

🚀 Getting started

Install from pub

flutter pub add flutter_emoji_feedback

📔 Usage

Import flutter_emoji_feedback:

import 'package:flutter_emoji_feedback/flutter_emoji_feedback.dart';

EmojiFeedback(
  initialRating: 4, // Set to null (default) for no initial rating
  animDuration: const Duration(milliseconds: 300), // Duration of the animation
  curve: Curves.bounceIn, // Curve of the animation
  inactiveElementScale: .5, // Scale of the inactive element
  onChanged: (value) {
    // Callback when the user change the value of the emoji
  },
  onChangeWaitForAnimation: true, // Wait for the animation of the emoji to complete before calling `#onChanged`
  // Other parameters
);

Parameters

Parameter name	Description	Type
`onChangeWaitForAnimation`	If true, the emoji's animation will finish before calling `#onChange`	`bool`
`initialRating`	Sets the initial rating, if null, there will be no initial rating	`int?`
`tapScale`	The scale for when the user holds down the emoji, set to `inactiveElementScale` for none	`double`
`animDuration`	Duration of the animation	`Duration`
`curve`	Curve of the animation	`Curve`
`inactiveElementScale`	Scale of the inactive element	`double`
`onChanged`	Function called when an item is selected. Values goes from 1 to `preset.length`	`ValueChanged<int?>?`
`emojiPreset`	List of emojis. Available presets: `classicEmojiPreset`, `flatEmojiPreset`, `threeDEmojiPreset`, `notoAnimatedEmojis`, `notoEmojis`. You can create your own presets, see Defining Presets.	`EmojiPreset`
`presetBuilder`	Custom emoji widget builder	`EmojiBuilder?`
`showLabel`	Whether the label should be displayed or not	`bool`
`labelTextStyle`	Style of the emoji label	`TextStyle?`
`customLabels`	Define your custom labels. Useful if you wish to use the predefined emojis with custom labels	`List<String>?`
`inactiveElementBlendColor`	Custom blend color for inactive elements	`Color?`
`spaceBetweenItems`	Space between items	`double`
`elementSize`	Size of emoji elements	`double?`
`labelPadding`	Label padding	`EdgeInsetsGeometry`
`enableFeedback`	Enable haptic feedback	`bool`
`minRating`	Minimum rating	`int`
`maxRating`	Maximum rating	`int`
`onChangeWaitForAnimation`	If true, the onChange callback will be called after the animation is completed	`bool`

🎨 Defining presets

You can easily create presets using the StaticEmojiPreset and AnimatedEmojiPreset, which hold the emojis.

// Defining a static emoji preset using SVG files
// Replace the `image` with your SVG file path
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,
  ),
]);

// Defining an animated emoji preset using Lottie files
// Replace the `animation` with the path to your Lottie file
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,
  ),
]);

📝 License

This project is licensed under the MIT License - see the LICENSE file for details

📄 Changelog

See CHANGELOG.md for details.

📄 Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.