flutter: zoom in & zoom out image inside stack

Question

I am using stack of images and I have a transparent image over another image which works as a frame. Now I want to zoom in and zoom out the back image.

I am using InteractiveViewer, which is only working for front image only. I need to do same for back image.

Here is an example.

I want to zoom the elephant image, which is my first element in Stack. Here is my code.

body: Container(
        padding: EdgeInsets.all(12.0),
        margin: EdgeInsets.fromLTRB(0, 0, 0, 60),
        child: Center(
            child: Column(children: [
          Expanded(
            flex: 10,
            child: RepaintBoundary(
              key: scr,
              child: ClipRect(
                clipBehavior: Clip.hardEdge,
                child: Stack(
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(
                          left: 67.5, right: 67, top: 9, bottom: 9),
                      child: Column(
                        children:  [
                          pikedFile == null ? Container(
                          ):InteractiveViewer(
                                panEnabled: false, // Set it to false
                                boundaryMargin: EdgeInsets.all(100),
                                minScale: 0.5,
                                maxScale: 2,
                                child: Image(image: FileImage(pikedFile!)) // Back Image
                              ),
                        ],
                      ),
                    ),
                    Center(
                      child: Image(image: AssetImage(getResource())), //Front Image
                    ),
                  ],
                ),
              ),
            ),
          ),
          Expanded(
              flex: 3,
              child: Row(
                children: [
                  Expanded(
                    flex: 1,
                    child: TextButton.icon(
                      icon: const Icon(Icons.camera_alt), // Your icon here
                      label: const Text("Camera"), // Your text here
                      onPressed: () {
                        _openCamera();
                      },
                    ),
                  ),
                  Expanded(
                    flex: 1,
                    child: TextButton.icon(
                      icon: const Icon(Icons.photo), // Your icon here
                      label: const Text("Gallery"), // Your text here
                      onPressed: () {
                        _openGallery();
                      },
                    ),
                  ),
                  Expanded(
                    flex: 1,
                    child: TextButton.icon(
                      icon: const Icon(Icons.share_sharp), // Your icon here
                      label: const Text("Share"), // Your text here
                      onPressed: () {
                        _shareScreenShot();
                      },
                    ),
                  ),
                ],
              ))
        ])),
      ),

user_8354049 · Answer

As per my understanding You want to interact with the bottom widget in the stack, if this is the case then Ignore pointer can help you.

Just wrap the above widgets in the stack with IgnorePointer just like this.

Stack(
children:[
  Container(color:Colors.red) // this is where you want to interact and 
                            //this containerbottom of the stack.
  IgnorePointer(
          ignoring: true,
          Container(color:Colors.blue)// top container
   )
 ])

user_19107084 · Answer

try wrapping the stack widget with the InteractiveViewer widget.

 InteractiveViewer(
   child:Stack(), 
           )

user_2828341 · Answer

Besides using IgnorePointer to ignore interaction with the image, cropping both the top and bottom frames would be better for displaying on multiple device screens (and even on portrait and landscape mode). You can use Positioned to place the 2 images on the top-right and bottom-left.

Check out the live demo on DartPad (Use the mouse wheel to zoom-in/zoom-out).

For example, using the cropped frames below:

Top-left frame	Bottom-Right frame

The result is the following:

	Zoom-in	Normal	Zoom-out
Portrait
Landscape

flutter: zoom in & zoom out image inside stack

3 Answers