Custom Interactive View

import 'package:flutter/material.dart';

class InteractiveViewTest extends StatefulWidget {
  const InteractiveViewTest({super.key});

  @override
  State<InteractiveViewTest> createState() => _InteractiveViewTestState();
}

/// [AnimationController]s can be created with `vsync: this` because of
/// [TickerProviderStateMixin].
class _InteractiveViewTestState extends State<InteractiveViewTest>
    with TickerProviderStateMixin {
  TransformationController controller = TransformationController();
  TapDownDetails? tapDownDetails;

  late AnimationController animationController;
  late Animation<Matrix4> animation;

  @override
  void initState() {
    super.initState();
    // controller = TransformationController();
    animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 300),
    )..addListener(() {
        controller.value = animation.value;
      });

    initZoom();
  }

  void initZoom() {
    final position = tapDownDetails?.localPosition;
    double scale = 6.0;
    final x = position != null ? -position.dx * (scale - 1) : -816.0;
    final y = position != null ? -position.dy * (scale - 1) : -1726.0;
    print('x: $x');
    print('y: $y');
    final zoomed = Matrix4.identity()
      ..translate(x, y)
      ..scale(scale);
    // final end = controller.value.isIdentity() ? zoomed : Matrix4.identity();
    animation = Matrix4Tween(
      begin: controller.value,
      end: zoomed,
    ).animate(CurveTween(curve: Curves.easeInOut).animate(animationController));
    animationController.forward(from: 0);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        // backgroundColor: Theme.of(context).colorScheme.primary,
        appBar: AppBar(
            // automaticallyImplyLeading: false,
            // title: const Text('Controller demo'),
            ),
        body: Center(
          child: InteractiveViewer(
            transformationController: controller,
            // clipBehavior: widget.clipBehavior ? Clip.hardEdge : Clip.none,
            // panEnabled: false,
            // scaleEnabled: false,
            maxScale: 11.0,
            minScale: .1,
            child: GestureDetector(
                onTapDown: (TapDownDetails details) => tapDownDetails = details,
                onDoubleTapDown: (TapDownDetails details) =>
                    tapDownDetails = details,
                onDoubleTap: () {
                  final position = tapDownDetails!.localPosition;
                  double scale = 6.0;
                  final x = -position.dx * (scale - 1);
                  final y = -position.dy * (scale - 1);
                  print('x: $x');
                  print('y: $y');
                  final zoomed = Matrix4.identity()
                    ..translate(x, y)
                    ..scale(scale);
                  final end = controller.value.isIdentity()
                      ? zoomed
                      : Matrix4.identity();
                  animation = Matrix4Tween(
                    begin: controller.value,
                    end: end,
                  ).animate(CurveTween(curve: Curves.easeInOut)
                      .animate(animationController));
                  animationController.forward(from: 0);
                },
                child: Container(
                  width: MediaQuery.of(context).size.width,
                  decoration: const BoxDecoration(
                      image: DecorationImage(
                    image:
                        AssetImage('assets/Three-Kingdom-The-Journey-Map.jpg'),
                  )),
                )),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: initZoom,
          child: const Icon(Icons.center_focus_strong_rounded),
        ));
  }
}