heart_overlay 1.1.0 copy "heart_overlay: ^1.1.0" to clipboard
heart_overlay: ^1.1.0 copied to clipboard

The HeartOverlay widget can be used to create a fun and interactive overlay that displays a heart animation when the user taps on the screen.

Heart Overlay Widget πŸ’– #

The HeartOverlay widget can be used to create a fun and interactive overlay that displays a heart animation when the user taps on the screen. It can be used as a decorative element for apps that require a playful or romantic touch, such as dating apps, greeting card apps, or social media apps.

screenshot of the app

A screen record will be provided soon

Features 🀩 #

  • Displays a heart-shaped icon overlaid on top of eachother when tapped in quick succession while shrinking and fading at the same time just like social media apps (i.e Tik tok, Instagram).πŸ’–
  • The displayed icon can be styled however you like.πŸ€—
  • The overlay background can be customized however you like.✏️

Getting started πŸ€— #

To use this package, add heart_overlay as a dependency in your file.

Then import

    import 'package:heart_overlay/heart_overlay.dart';

Usage 🧐 #

Simple usage:

    HeartOverlay();

More customizability:

    HeartOverlay(
        icon: Icon(
          Icons.abc,
          color: Colors.cyan,
        ),
        verticalOffset: 10,  // Vertical Offset from tap position
        horizontalOffset: 10,  // Horizontal Offset from tap position
        duration: Duration(milliseconds: 800), // Icon to stay on screen duration 
        backgroundWidget: Image.asset('assets/image.png'), // Overlay container background
        tapDownType: TapDownType.double, // The animation trigger type
        cacheExtent: 10, // The cache extent
        onPressed: (numberOfHearts) {
            // Do something with the number of hearts shown or do something whenever the icon appears
        },
    ),

Planning to add βž• #

  • Check out the CHANGELOG for next planned updates.

Common Errors πŸ› #

If you get errors like forces infinite height/forces infinite width when used in a Column, Row or Flex widget:

Specify a desired height/width

OR

Wrap the HeartOverlay in an Expanded/Flexible widget.

And if an Expanded widget is used, height/width properites are basically useless.

Additional information ℹ️ #

This package is available on GitHub and Pub.dev. πŸ“ƒ

If you encounter any issues or would like to contribute to the package, feel free to open a GitHub issue. Contributions are welcome and appreciated.πŸ™

Remember to leave a likeπŸ‘ here and a star⭐ on gihub to help expose useful packages like these to others and that would be much appreciated. Thank you! πŸ€—

11
likes
0
pub points
78%
popularity

Publisher

unverified uploader

The HeartOverlay widget can be used to create a fun and interactive overlay that displays a heart animation when the user taps on the screen.

Repository (GitHub)
View/report issues

License

unknown (license)

Dependencies

flutter

More

Packages that depend on heart_overlay