Flutter web app pinch in out zoom not working

Question

I am developing website from Flutter. Flutter website does not support pinch in out zoom.

Laptop trackpad pinch in out zoom not working. Nor Android or IOS app touch zoom in out working.

What I want to do is make website zoom by CTRL+ and TrackPad Pinch Gesture and Touchscreen 2 finger gesture. CTRL+ working fine. But TrackPad pinch and Touchscreen gesture not working.

This problem is occuring on default code too.

import 'package:flutter/material.dart';

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

class MyCustomScrollBehavior extends MaterialScrollBehavior {
  const MyCustomScrollBehavior();

  @override
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.mouse,
      }..addAll(super.dragDevices);
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      scrollBehavior: const MyCustomScrollBehavior(),
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Is there any solution? Thanks in Advance.

Answer 1

You can use the InteractiveViewer widget to allow pinch to zoom:

InteractiveViewer(
        transformationController: _transformationController,
        onInteractionEnd: _updateScale,
        minScale: _minScale,
        maxScale: _maxScale,
        clipBehavior: Clip.none,
        child: child,
      )

Documentation: https://api.flutter.dev/flutter/widgets/InteractiveViewer-class.html