import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'MyApp Demo',
      home: Scaffold(
        body: Center(
          child: SingleChildScrollView(
            child: MainWidget(),
          ),
        ),
      ),
      debugShowCheckedModeBanner: false,
    );
  }
}

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

  @override
  State<MainWidget> createState() => _MainWidgetState();
}

class _MainWidgetState extends State<MainWidget> {
  double scale = 1.0;

  double scaleStart = 1.0;

  @override
  Widget build(BuildContext context) {
    return Listener(
      onPointerPanZoomStart: (event) {
        scaleStart = scale;
      },
      onPointerPanZoomUpdate: (event) {
        setState(() {
          scale = scaleStart * event.scale;
        });
      },
      onPointerPanZoomEnd: (event) {
        scaleStart = scale;
      },
      child: Container(
        // This will ensure that the entire window space is covered by the
        // listener.
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        // The color ensure that the hit test succeeds.
        decoration: BoxDecoration(
          color: Colors.green.withOpacity(0.1),
          border: Border.all(color: Colors.black, width: 3),
        ),
        child: Stack(
          alignment: Alignment.center,
          children: [
            Transform.scale(
              scale: scale,
              child: Center(
                child: Container(
                  width: 300,
                  height: 300,
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.black, width: 3),
                    gradient: const LinearGradient(
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                      colors: [
                        Colors.red,
                        Colors.green,
                        Colors.blue,
                      ],
                    ),
                  ),
                ),
              ),
            ),
            Material(
              color: Colors.transparent,
              child: InkWell(
                onTap: () {
                  setState(() {
                    scale = 1.0;
                  });
                },
                child: Container(
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.black, width: 1),
                      color: Colors.white.withOpacity(0.5),
                      borderRadius: BorderRadius.circular(4),
                    ),
                    padding: const EdgeInsets.all(4),
                    child: Text('Scale: ${scale.toStringAsPrecision(3)}')),
              ),
            ),
          ],
        ),
      ),
    );
  }
}