Search code examples
flutterdartzoomingoverlayphotoviewer

Flutter: How to make the below image widget functional in Stack

I try to achieve the feature: pinch to zoom in/out an image under another overlay image.

My approach is using photo_view to make the main photo zoomable and put the overlay image on top of the main photo by the "stack".

import 'package:photo_view/photo_view.dart';

class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Stack(
        children: <Widget>[
          Container(
            child: PhotoView(
              initialScale: PhotoViewComputedScale.covered,
              imageProvider: AssetImage("assets/mainphoto.jpg"),
              ),
            ),
          ),
          Container(
            child: Center(
              child: AssetImage("assets/overlay.png”),
            ),
          ),
        ],
      ),
    );
  }
}

The result of the above code

enter image description here

But the overlay image completely disables the main photo, I cannot pinch to zoom in/out the main photo.

I think it’s because of Stack, I googled around it but still don’t have any proper solution.

If any suggestions, I am very appreciated.

Solution

  • Use IgnorePointer Widget

    IgnorePointer(
  child: Container(
    child: Center(
      child: Image.asset(
        "assets/overlay.png",
      ),
    ),
  ),
)