1

In below code ,I just add a image inside container, I used interactive viewer for pinch zooming

 import 'package:flutter/material.dart';
void main()
{
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: Zoom(),
      ),
    );
  }
}
class Zoom extends StatefulWidget
{
  @override
  MyStatelessWidget createState()=> MyStatelessWidget();
}
/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends State<Zoom> {


  @override
  Widget build(BuildContext context) {
    return Container(height: 1500,
            child: InteractiveViewer(
                child:Container( child:Image.asset('assets/pdfpage.png',fit: BoxFit.fitWidth)),
       )
    );
  }
}

enter image description here

In Maximum zoom level

enter image description here

In Minimum zoom level

need to zoom a container widget alone, I use ctrl+mousewheelscroll to zoom a image in flutter web, appbar and whole webpage are zoomed.

Allwin Vinosh
  • 95
  • 1
  • 7
  • `ctrl + scroll` zoom is the default browser behavior and it probably can't be overriden. Although you can listen to the mouse wheel scroll in Flutter like this: https://stackoverflow.com/questions/60716259/how-to-detect-mouse-wheel-scrolling-in-flutter-web. Maybe you can try something with that. – Andrej Jan 19 '21 at 13:29
  • Okay Thank you for your response – Allwin Vinosh Jan 20 '21 at 04:40

1 Answers1

0

add this snippet to your index.html

<script>
  window.addEventListener('keydown', function(e) {
    if (event.metaKey || event.ctrlKey) {
      switch (event.key) {
        case '=':
        case '-':
          event.preventDefault();
          break;
      }
    }
  });
</script>
Or Moyal
  • 1