class MyMobileBody extends StatefulWidget {
  const MyMobileBody({Key? key}) : super(key: key);

  @override
  State<MyMobileBody> createState() => _MyMobileBodyState();
}

class _MyMobileBodyState extends State<MyMobileBody> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
      color: Colors.grey.shade200,
      child: Center(
        child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Icard(img: 'assets/img/background/image-4.jpg'),
                Icard(img: 'assets/img/background/image-5.png'),
                Icard(img: 'assets/img/background/image-3.jpg'),
                Icard(img: 'assets/img/background/image-1.png'),
              ],
            )
      ),
    ));
  }
}

class Icard extends StatefulWidget {
  final String img;
  const Icard({Key? key,required this.img}) : super(key: key);

  @override
  State<Icard> createState() => _IcardState();
}

class _IcardState extends State<Icard> {
  bool isHover = false;
  Offset mousPos = new Offset(0, 0);

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (e) {
        setState(() {
          isHover = true;
        });
      },
      onHover: (e) {
        setState(() {
          mousPos = Offset(e.delta.dx , e.delta.dy);
        });
      },
      onExit: (e) {
        setState(() {
          isHover = false;
        });
      },
      child: Container(
        height: 450,
        width: 280,
        decoration: BoxDecoration(
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              color: Colors.grey.shade400,
              blurRadius: isHover ? 15 : 2,
              spreadRadius: isHover ? 5 : 2,
            ),
          ],
        ),
        child: Stack(
          children: [
            backImage(widget.img),
            // shadow animation .
            gradiant(),
            text(),
          ],
        ),
      ),
    );
  }

  backImage(String img) {
    return AnimatedPositioned(
      curve: Curves.easeOutCubic,
      duration: Duration(milliseconds: 1000),
      height: isHover ? 600 : 450,
      top: isHover ? -40 + mousPos.dy : 0,
      left: isHover ? -100 + mousPos.dx : -100,
      width: 500,
      child: Container(
        width: 500,
        height: 600,
        decoration: BoxDecoration(
          image: DecorationImage(
            fit: BoxFit.fitHeight,
            image: AssetImage(img)
          )
        ),
      ),
    );
  }

  gradiant() {
    return AnimatedContainer(
      duration: Duration(milliseconds: 1000),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.bottomCenter,
            end: Alignment.topRight,
            colors: [
              Colors.black.withOpacity(isHover ? 0.7 : 0),
              Colors.transparent,
            ]
        )
      ),
    );
  }

  text() {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: SizedBox(
        width: double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            AnimatedDefaultTextStyle(child: Text('Test Image'), style: TextStyle(
              color: Colors.white.withOpacity(isHover ? 1 : 0.6),
              fontSize: 25
            ), duration: Duration(milliseconds: 1000)),
          ],
        ),
      ),
    );
  }
}