How to expand the bottom of a card on mouse hover? Flutter Web - flutter

Question

I have card with image file and text where I want to do hover effect. I just want to display more information of product on mouse hover like image below. Card is overlaying the other card. How can I achieve this? Please help. Flutter Web

Answer 1

You can use Mouse Region to detect a hover and use the animation class for animating the widget. create a separate widget for this box and use it like this. here is a code sample you may like to use.
Sample Code here
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
bool touched = false;
String image1 =
'https://images.unsplash.com/photo-1525786210598-d527194d3e9a?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80';
String image2 =
'https://images.unsplash.com/photo-1578616070222-50c4de9d5ade?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60';
String image3 =
'https://images.unsplash.com/photo-1502324224542-7ea9927946fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60';
class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Container(
color: const Color(0xff393e46),
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
HoverImage(
image: image1,
),
HoverImage(
image: image2,
),
HoverImage(
image: image3,
),
],
),
),
),
),
);
}
}
class HoverImage extends StatefulWidget {
final String image;
const HoverImage({required this.image});
#override
_HoverImageState createState() => _HoverImageState();
}
class _HoverImageState extends State<HoverImage>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation _animation;
late Animation padding;
#override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(milliseconds: 275),
vsync: this,
);
_animation = Tween(begin: 1.0, end: 1.2)
.animate(CurvedAnimation(parent: _controller, curve: Curves.ease, reverseCurve: Curves.easeIn));
padding = Tween(begin: 0.0, end: -25.0)
.animate(CurvedAnimation(parent: _controller, curve: Curves.ease,reverseCurve: Curves.easeIn));
_controller.addListener(() {
setState(() {});
});
}
#override
Widget build(BuildContext context) {
return MouseRegion(
onEnter: (value) {
setState(() {
_controller.forward();
});
},
onExit: (value) {
setState(() {
_controller.reverse();
});
},
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
boxShadow: const [
BoxShadow(
color: Colors.black26,
offset: Offset(0.0, 20.0),
spreadRadius: -10.0,
blurRadius: 20.0,
)
],
),
child: Container(
height: 220.0,
width: 170.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
),
clipBehavior: Clip.hardEdge,
transform: Matrix4(_animation.value, 0, 0, 0, 0, _animation.value, 0,
0, 0, 0, 1, 0, padding.value, padding.value, 0, 1),
child: Image.network(
widget.image,
fit: BoxFit.cover,
),
),
),
);
}
}