ivofernandes/pinch_zoom_release_unzoom

how to disable scrollview when pinch zoom in image?

Closed this issue · 5 comments

I am using the lib pinch_zoom_release_unzoom to pinch zoom image. I create it inside SingleChildScrollView but when user use 2 finger to pinch zoom image. it very hard to zoom because sometime page is Scrollable. so I want to solve this problem

this is my example

import 'package:flutter/material.dart';
import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';
import 'package:pinch_zoom_release_unzoom/pinch_zoom_release_unzoom.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tutorial',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  String imageUrl = 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg';

  TransformationController controller = TransformationController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Tutorial'),
      ),
      body: Column(
        children: [
          Center(
            child: ElevatedButton(
              onPressed: () {
                showMaterialModalBottomSheet(
                  expand: false,
                  context: context,
                  builder: (context) => PinchZoomReleaseUnzoomWidget(
                    child: SingleChildScrollView(
                      controller: ModalScrollController.of(context),
                      physics: const ClampingScrollPhysics(),
                      child: Column(
                        children: [
                          const SizedBox(
                            height: 300,
                          ),
                          Image.network(imageUrl),
                          const SizedBox(
                            height: 1000,
                          ),
                        ],
                      ),
                    ),
                  ),
                );
              },
              child: const Text(
                'showModalBottomSheet',
              ),
            ),
          ),
        ],
      ),
    );
  }
}

I think there are two possible solutions, at least one of them should work:

  • set physics property of SignleChildScrollview to NeverScrollableScrollPhysics()
  • set primary: false

I must use SignleChildScrollview can scrollable so I cannot set SignleChildScrollview to NeverScrollableScrollPhysics()

I think you are right, the scroll should not break the pinch functionality, specially because it's up on the widget tree.

That's because the interaction did not start?

I guess that a scroll notification goes up on the widget tree and if is used to start the interaction with the interactive viewer of the pinch to zoom, will not be used to scroll, did you tried to set fingersRequiredToPinch to zero?

Try to add:

fingersRequiredToPinch: 0,

It was also discussed on this issue:
#1

Maybe I should have some logic that is smarter in term of detecting a pinch interaction

This part have a details that can be used to refine when should or should not start an interaction

 onInteractionStart: (details) {
                if (widget.fingersRequiredToPinch > 0 &&
                    details.pointerCount != widget.fingersRequiredToPinch) {
                  print('start with ${details.pointerCount} fingers');
                  return;
                }
                if (widget.useOverlay) {
                  showOverlay(context);
                }
              },

The problem does not look to be in the number of fingers of the interaction, I guess is actually harder to start an interaction inside a single child scroll view

The code on the interactive viewer looks like this:

return Listener(
   key: _parentKey,
   onPointerSignal: _receivedPointerSignal,
   child: GestureDetector(
     behavior: HitTestBehavior.opaque, // Necessary when panning off screen.
     onScaleEnd: _onScaleEnd,
     onScaleStart: _onScaleStart,
     onScaleUpdate: _onScaleUpdate,
     child: child,
   ),
 );

Maybe it's possible to extend the interactive viewer to make it easier to start an interaction? I guess the problem is right there in the code of the interactive viewer, not sure how to solve this

Fixed behaviour with scroll by firing events when two fingers are in the screen, so scroll can be disabled