Flutter Web image hover zoom(實現圖片懸浮縮放)

InkWell(

        onTap: () {

          print('Tap');

        },

        // Detect hover here

        onHover: (val) {

          setState(() {

            isHover = val;

            print(val);

          });

        },

        child: //Child

)

AnimatedContainer(

            transform: isHover ? hoverdTransform : unhoverdTransform,

            // duraction time

            duration: const Duration(seconds: 10),

            curve: Curves.ease,

            child: Image.network(

              imageUrl,

              fit: BoxFit.cover,

              height: 200,

            ),

          ),

import 'dart:convert';

import 'dart:io';



import 'package:flutter/material.dart';



void main() {

  runApp(

    MaterialApp(

      home: Home(),

    ),

  );

}



class Home extends StatefulWidget {

  @override

  _HomeState createState() => _HomeState();

}



class _HomeState extends State<Home> {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      body: ZoomAnimate(),

    );

  }

}



class ZoomAnimate extends StatefulWidget {

  const ZoomAnimate({Key? key}) : super(key: key);



  @override

  State<ZoomAnimate> createState() => _ZoomAnimateState();

}



class _ZoomAnimateState extends State<ZoomAnimate> {

  bool isHover = false;

  String imageUrl =

      "https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg";



  @override

  Widget build(BuildContext context) {

    final hoverdTransform = Matrix4.identity()..scale(1.2);

    final unhoverdTransform = Matrix4.identity()..scale(1);

    return Padding(

      padding: const EdgeInsets.all(8.0),

      child: InkWell(

        onTap: () {

          print('Tap');

        },

        onHover: (val) {

          setState(() {

            isHover = val;

            print(val);

          });

        },

        child: ClipRRect(

          borderRadius: BorderRadius.circular(8.0),

          child: AnimatedContainer(

            transform: isHover ? hoverdTransform : unhoverdTransform,

            duration: const Duration(seconds: 10),

            curve: Curves.ease,

            child: Image.network(

              imageUrl,

              fit: BoxFit.cover,

              height: 200,

            ),

          ),

        ),

      ),

    );

  }

}