heart_overlay 1.3.0
heart_overlay: ^1.3.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.
example/lib/main.dart
import 'package:flutter/material.dart';
import 'package:heart_overlay/heart_overlay.dart';
void main() {
runApp(const MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData.dark(useMaterial3: true),
home: const HeartOverlayTestWidget(),
);
}
}
class HeartOverlayTestWidget extends StatelessWidget {
const HeartOverlayTestWidget({
super.key,
});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black45,
appBar: AppBar(
title: const Text('Heart Overlay'),
centerTitle: true,
backgroundColor: Colors.cyan,
),
body: Column(
children: [
Expanded(
child: HeartOverlay(
duration: const Duration(seconds: 5),
backgroundColor: Colors.black,
tapDownType: TapDownType.single,
// verticalOffset: 20,
// horizontalOffset: -100,
cacheExtent: 30,
splashAnimationDetails: const SplashAnimationDetails(
enableSplash: true,
animationDuration: Duration(seconds: 3),
),
icon: const Icon(
Icons.favorite,
color: Colors.redAccent,
size: 100,
),
onPressed: (numberOfHearts) {
// Do something with the number of hearts or do something whenever the icon appears
},
// child: Center(
// child: ElevatedButton(
// onPressed: () {},
// child: const Text('Tap here'),
// ),
// ),
),
),
// Expanded(
// child: HeartOverlay(
// duration: const Duration(seconds: 2),
// backgroundColor: Colors.white10,
// tapDownType: TapDownType.single,
// icon: const Text('✌️'),
// splashAnimationDetails: const SplashAnimationDetails(
// enableSplash: true,
// ),
// size: 60,
// // Sometimes it might be nesessary to add vertical and horizontal offset
// verticalOffset: 20,
// horizontalOffset: -10,
// onPressed: (numberOfHearts) {
// // Do something with the number of hearts or do something whenever the icon appears
// },
// child: Center(
// child: ElevatedButton(
// onPressed: () {},
// child: const Text('Tap here'),
// ),
// ),
// ),
// ),
],
),
);
}
}