{"id":32290377,"url":"https://github.com/johnf17/heart_overlay","last_synced_at":"2026-05-14T20:01:50.107Z","repository":{"id":158477874,"uuid":"634078808","full_name":"JohnF17/heart_overlay","owner":"JohnF17","description":"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.","archived":false,"fork":false,"pushed_at":"2023-09-06T07:18:00.000Z","size":93,"stargazers_count":5,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-04-26T23:12:13.686Z","etag":null,"topics":["dart","dartlang","favorite","flutter","lightweight","like","multitouch","overlay","package","social-media","social-media-app"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/heart_overlay","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JohnF17.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-04-29T01:42:02.000Z","updated_at":"2025-04-22T08:11:11.000Z","dependencies_parsed_at":"2023-07-06T07:46:03.915Z","dependency_job_id":null,"html_url":"https://github.com/JohnF17/heart_overlay","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/JohnF17/heart_overlay","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JohnF17%2Fheart_overlay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JohnF17%2Fheart_overlay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JohnF17%2Fheart_overlay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JohnF17%2Fheart_overlay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JohnF17","download_url":"https://codeload.github.com/JohnF17/heart_overlay/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JohnF17%2Fheart_overlay/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33041204,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-13T13:14:54.681Z","status":"online","status_checked_at":"2026-05-14T02:00:06.663Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dart","dartlang","favorite","flutter","lightweight","like","multitouch","overlay","package","social-media","social-media-app"],"created_at":"2025-10-23T02:51:05.609Z","updated_at":"2026-05-14T20:01:50.101Z","avatar_url":"https://github.com/JohnF17.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!--\n    Name: John\n    GitHub: https://github.com/JohnF17\n--\u003e\n## Heart Overlay Widget 💖\n\nThe `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.\n\n![screenshot of the app](example/screenshots/icon_overlay.jpg)\n\n_A screen record will be provided soon_\n\n## Features 🤩\n\n- 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).💖\n- The displayed icon can be any widget and can be styled however you like.🤗\n- The overlay background can be customized however you like.✏️\n\n## Getting started 🤗\n\nTo use this package, add `heart_overlay` as a dependency in your \u003cu\u003epubspec.yaml\u003c/u\u003e file.\n\nThen import\n```\n    import 'package:heart_overlay/heart_overlay.dart';\n``` \n\n## Usage 🧐\n\n**Simple usage:**\n```dart\n    HeartOverlay();\n```\n\n**More customizability:**\n\n_With Icon:_\n```dart\n    HeartOverlay(\n        icon: Icon(\n          Icons.abc,\n          color: Colors.cyan,\n          size: 40,\n        ),\n        controller: heartOverlayController, // [HeartOverlayController] - check out the example to see how it's used\n        verticalOffset: 10,  // Vertical Offset from tap position\n        horizontalOffset: 10,  // Horizontal Offset from tap position\n        duration: Duration(milliseconds: 800), // Icon to stay on screen duration \n        tapDownType: TapDownType.double, // The animation trigger type\n        cacheExtent: 10, // The cache extent\n        splashAnimationDetails: const SplashAnimationDetails(\n            enableSplash: true, // Enables a light weight splash animation to the icon provided\n            animationDuration: Duration(seconds: 3), // Animation duration of the splash icon\n        ), \n        onPressed: (numberOfHearts) {\n            // Do something with the number of hearts shown or do something whenever the icon appears\n        },\n        child: Image.asset('assets/image.png'), // Overlay container background\n    ),\n```\n\n### or \n\n_With any Widget:_\n```dart\n    HeartOverlay(\n        icon: const Text('✌️'),\n        size: 60,\n        controller: heartOverlayController, // [HeartOverlayController] - check out the example to see how it's used\n        // It might be nesessary to add vertical and horizontal offset when using other types of widget instead of [Icon]s to accurately position the widgets\n        verticalOffset: 20,  // Vertical Offset from tap position\n        horizontalOffset: -10,  // Horizontal Offset from tap position\n        duration: Duration(milliseconds: 800), // Icon to stay on screen duration \n        tapDownType: TapDownType.single, // The animation trigger type\n        cacheExtent: 10, // The cache extent\n        onPressed: (numberOfHearts) {\n            // Do something with the number of hearts shown or do something whenever the icon appears\n        },\n        child: Image.asset('assets/image.png'), // Overlay container background\n    ),\n```\n\n- Check out the [example](example/lib/main.dart) for more detail.\n\n## Planning to add ➕\n\n- Check out the [CHANGELOG](CHANGELOG.md) for next planned updates.\n\n## Common Errors and Issues🐛\n\n### Errors\n\n If you get errors like `forces infinite height`/`forces infinite width`\n when used in a `Column`, `Row` or `Flex` widget:\n \n Specify a desired `height`/`width` to the `HeartOverlay` widget.\n \n OR \n \n Wrap the `HeartOverlay` in an `Expanded`/`Flexible` widget.\n\n Note that: And if an `Expanded`/`Flexible` widget is used, `height`/`width` properites are basically useless.\n\n### Issues\n\nAs of `HeartOverlay Version: 1.2.0`, *Widget support* is available as shown [here](example/screenshots/widget_overlay.jpg), though you might have to fiddle with the _vertical_ and _horizontal_ offsets to precisely align the widget to its tap position.\n\nAs of `HeartOverlay Version: 1.3.0`, *Splash support* is available as shown [here](example/screenshots/splash_overlay.jpg), though it can only support [Icon] types.\n\n## Additional information ℹ️\n\nThis package is available on [GitHub](https://github.com/JohnF17/heart_overlay) and [Pub.dev](https://pub.dev/packages/heart_overlay). 📃\n\nIf you encounter any issues or would like to contribute to the package, feel free to open a [GitHub issue](https://github.com/JohnF17/heart_overlay/issues). Contributions are welcome and appreciated.🙏\n\nRemember 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! 🤗\n\n\u003c!-- ### Other Packages\n\n- Project Board (Comming Soon) \n \n--\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohnf17%2Fheart_overlay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohnf17%2Fheart_overlay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohnf17%2Fheart_overlay/lists"}