InteractiveViewer on ModalBottomSheet

Question

I'm trying to use InteractiveViewer inside modal bottom sheet using showModalBottomSheet. I want user to be able to zoom and then move through the photo using pinch and pan gestures. Unfortunately when I do a pan gesture vertically, VerticalDragGestureRecognizer is winning over ScaleGestureRecognizer on gesture arena.

flutter: Gesture arena 48   ❙ ★ Opening new gesture arena.
flutter: Gesture arena 48   ❙ Adding: ScaleGestureRecognizer#962c4(debugOwner: GestureDetector)
flutter: Gesture arena 48   ❙ Adding: VerticalDragGestureRecognizer#57396(debugOwner: GestureDetector, start behavior: start)
flutter: Gesture arena 48   ❙ Closing with 2 members.
flutter: Gesture arena 48   ❙ Accepting: VerticalDragGestureRecognizer#57396(debugOwner: GestureDetector, start behavior: start)
flutter: Gesture arena 48   ❙ Self-declared winner: VerticalDragGestureRecognizer#57396(debugOwner: GestureDetector, start behavior: start)

Here is my bottom sheet code

class PhotoViewerSheet extends StatelessWidget {
  static String route = '/photo-viewer';

  final ScoutingNoteAttachmentFile image;

  const PhotoViewerSheet({
    Key? key,
    required this.image,
  }) : super(key: key);

  static Future<void> show(BuildContext context) {
    return showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      builder: (context) => Container(
        decoration: const BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(16.0),
            topRight: Radius.circular(16.0),
          ),
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const SizedBox(height: 10),
            const AppBottomSheetHeader(text: 'Photo'),
            const SizedBox(height: 10),
            SizedBox(
              height: context.screenHeight * 0.5,
              width: context.screenWidth,
              child: InteractiveViewer(
                child: const FlutterLogo(size: 200),
              ),
            ),
          ],
        ),
      ),
    );
  }
  
}

From what I know, RawGestureDetector could help in this situation but I don't know how to use it here.

Answer 1

you can use IngrorePointer or AbsorbPointer if you want disable other gesture detectors like:

IgnorePointer(
  ignoring: true,
  child: SizedBox(
              height: context.screenHeight * 0.5,
              width: context.screenWidth,
              child: InteractiveViewer(
                child: const FlutterLogo(size: 200),
              ),
            )),

or also you can add TransformationController for transformationController like

InteractiveViewer(
                        transformationController: _transformationController,
                          onInteractionUpdate: (v) {
                            setState(() {
                              interactiveScale = _transformationController.value
                                  .getMaxScaleOnAxis();
                            });
                          },)