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

  @override
  State<GG> createState() => _GGState();
}

class _GGState extends State<GG> with SingleTickerProviderStateMixin {
  late TransformationController controller;
  late AnimationController animationController;
  Animation<Matrix4>? animation;
  final double minSize = 1;
  final double maxSize = 4;
  OverlayEntry? entry;
  double scale = 1;

  @override
  void initState() {
    super.initState();
    controller = TransformationController();
    animationController =
        AnimationController(vsync: this, duration: Duration(microseconds: 200))
          ..addListener(() => controller.value = animation!.value)
          ..addStatusListener((status) {
            if (status == AnimationStatus.completed) {
              removeOverlay();
            }
          });
  }

  @override
  void dispose() {
    super.dispose();
    animationController.dispose();
    controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // backgroundColor: Colors.grey[900],
      appBar: AppBar(
        // backgroundColor: Colors.black87,
      ),
      body: Center(
        // zoom widget
        child: buildZoom(),
      ),
    );
  }

  Widget buildZoom() {
    return Builder(builder: (context)=> InteractiveViewer(
      // black screen for zoom in .
      onInteractionUpdate: (details) {
        if (entry == null) return;
        this.scale = details.scale;
        entry!.markNeedsBuild();
      },

      onInteractionStart: (details) {
        if (details.pointerCount < 2) return;
        if (entry == null) {
          // zoom image above screen
          showOverlay(context);
        }
      },
      // Zoom out when you leave the screen
      onInteractionEnd: (details) {
        if (details.pointerCount != 1) return;
        restAnimation();
      },
      // control transformation
      transformationController: controller,
      // not stir
      // panEnabled: false,
      // max and main zoom .
      maxScale: maxSize,
      minScale: minSize,
      // zoom ful screen .
      clipBehavior: Clip.none,
      child: AspectRatio(
        // size image
        aspectRatio: 1.1,
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 15.0),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(15),
            child: Image.asset(
              images[3],
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
    ));
  }

  void restAnimation() {
    animation = Matrix4Tween(
      begin: controller.value,
      end: Matrix4.identity(),
    ).animate(
        CurvedAnimation(parent: animationController, curve: Curves.bounceOut));
    animationController.forward(from: 0);
  }

  void showOverlay(BuildContext context) {
    final renderBox = context.findRenderObject()! as RenderBox;
    final size = MediaQuery.of(context).size;
    final offset = renderBox.localToGlobal(Offset.zero);

     entry = OverlayEntry(
      builder: (context) {
        // min and max opacity .
        final opacity = ((scale - 1) / (maxSize - 1)).clamp(0.0, 1.0);
        return Stack(
          children: <Widget>[
            Positioned.fill(
              child: Opacity(
                opacity: opacity,
                child: Container(
                  color: Colors.black,
                ),
              ),
            ),
            Positioned(
                width: size.width,
                left: offset.dx,
                top: offset.dy,
                child: buildZoom())
          ],
        );
      },
    );

    final overlay = Overlay.of(context)!;
    overlay.insert(entry!);
  }

  void removeOverlay() {
    entry?.remove();
    entry = null;
  }
}