hoverover

Description:

hoverover

Hoverover #
A Flutter package that will give hover effect for Web and Desktop.
Installation #

Add the latest version of package to your pubspec.yaml (and rundart pub get):

dependencies:
hoverover: ^0.1.1
copied to clipboard

Import the package and use it in your Flutter App.

import 'package:hoverover/hoverover.dart';
copied to clipboard
Example #
There are a number of properties that you can modify:

animationDurationInMilliseconds : gives duration of the animation.
translateXAxis : translation value of x axis on hover.
translateYAxis : translation value of y axis on hover.
builder : the widget that will be built when the hover effect is active.
isHovered : a boolean that indicates if the hover effect is active or not.





class HoverOverExample extends StatelessWidget {
const HoverOverExample({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
HoverOver(
builder: (isHovered) {
/// change color on hover
final color = isHovered ? Colors.orange : Colors.redAccent;
return PhysicalModel(
color: Colors.white,
elevation: isHovered ? 16 : 0,
child: Container(
height: 50,
width: 200,
color: color,
child: const Center(
child: Text("Hoverover me"),
)),
);
},
/// animation duration
animationDurationInMilliseconds: 600,
/// translation of x axis
translateXAxis: 7,
/// translation of y axis
translateYAxis: 15,
),
const SizedBox(
height: 30,
),
],
);
}
}

copied to clipboard
Next Goals #

❌ Add more hover effects to the package.
❌ Add more hover functionality to the package.

Contributors #

Sameer Singh