title: InteractiveViewer on ModalBottomSheet
body: <p>I'm trying to use <code>InteractiveViewer</code> inside modal bottom sheet using <code>showModalBottomSheet</code>. 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, <code>VerticalDragGestureRecognizer</code> is winning over <code>ScaleGestureRecognizer</code> on gesture arena.</p>
  <pre><code>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)
  </code></pre>
  <p>Here is my bottom sheet code</p>
  <pre><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&lt;void&gt; show(BuildContext context) {
      return showModalBottomSheet(
        context: context,
        isScrollControlled: true,
        builder: (context) =&gt; 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),
                ),
              ),
            ],
          ),
        ),
      );
    }
    
  }
  </code></pre>
  <p>From what I know, RawGestureDetector could help in this situation but I don't know how to use it here.</p>