How to Set a zooming effect on image while hovering in flutter

Question

I want to zoom image while hovering, ive tried changing scale factor with Transform but it enlarges image in only to the right and bottom side, not like zooming.only way that worked was changing the boxFit of the image widget. but thats not animated like in the Gif

Transform.scale(
                      scale: isHovering ? 1.2 : 1.0,
                      child: Container(
                        decoration: BoxDecoration(
                          color: Colors.black.withOpacity(0.3),
                          borderRadius: BorderRadius.circular(8.0),
                        ),
                      ),
                    )

AnimatedContainer(
                    duration: const Duration(milliseconds: 200),
                    curve: Curves.easeInOut,
                    child: ClipRRect(
                      child: Image.memory(
                        Uint8List.fromList(images!.bytes),
                        width: size,
                        height: size,
                        fit: BoxFit.cover,
                      ),
                    ),
                  )

both doesnt serve requirement. any help would be appcreciated

Answer 1

You can use AnimatedContainer's transform to scale on hover. I am using InkWell as parent while widget need tap event.

child: AnimatedContainer(
  duration: Duration(milliseconds: 300),
  transform: Matrix4.identity()
    ..scale(isHovering ? 1.4 : 1.0),
  transformAlignment: Alignment.center,
  child: YourImage

And using

child: Transform.scale(
  scale: isHovering ? 1.4 : 1.0,
  child: YourImage()

Use scaling for inner item.

///* I am using same bool for both
class HZE extends StatelessWidget {
  const HZE({super.key});

  @override
  Widget build(BuildContext context) {
    bool isHovering = false;
    return Scaffold(
      body: Center(
        child: StatefulBuilder(
          builder: (BuildContext context, setState) {
            return Column(
              children: [
                InkWell(
                  onTap: () {},
                  onHover: (value) {
                    setState(() {
                      isHovering = value;
                    });
                  },
                  child: Container(
                    height: 100,
                    width: 100,
                    clipBehavior: Clip.antiAlias,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      color: isHovering ? Colors.red : Colors.blue,
                      borderRadius: BorderRadius.circular(10.0),
                    ),
                    child: Transform.scale(
                      scale: isHovering ? 1.4 : 1.0,
                      child: Text(
                        'Hello World',
                        style: TextStyle(
                          fontSize: 33,
                        ),
                      ),
                    ),
                  ),
                ),
                InkWell(
                  onTap: () {},
                  onHover: (value) {
                    setState(() {
                      isHovering = value;
                    });
                  },
                  child: Container(
                    height: 100,
                    width: 100,
                    clipBehavior: Clip.antiAlias,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        color: isHovering ? Colors.red : Colors.blue,
                        borderRadius: BorderRadius.circular(10.0)),
                    child: AnimatedContainer(
                      duration: Duration(milliseconds: 300),
                      transform: Matrix4.identity()
                        ..scale(isHovering ? 1.4 : 1.0),
                      transformAlignment: Alignment.center,
                      child: Text(
                        'Hello World',
                        style: TextStyle(
                          fontSize: 33,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}