Unable to Center InteractiveViewer and panning in Flutter Web app

Question

I am try to display list of images in interactiveviewer so I can pan in both direction. Even after placing inside the Center widget, the interactiveviewer is aligned left. Tried to set the constrained property as true and added a overflowbox with alignment in topcenter as did in flutter source. But, I can't pan the list of images and zoom in/ out to old position. This issue is only in Flutter Web app.

Kindly help me out in resolving this.

Center(
        child: InteractiveViewer(
          constrained: false,
          child: Column(
            key: _columnKey,
            children: List<Widget>.generate(
                10, (int index) {
              return Image.asset('assets/image.png');
            }),
          ),
        ),
      )

Answer 1

This is "intended" behaviour according to the Flutter team, and you can see it in the code for the InteractiveViewer widget that it creates an OverflowBox with alignment set to top-left. You can comment this out in your local files to see that the InteractiveViewer will be centered if you do. However, to actually make the widget centered properly, one solution (like I ended up doing) is to recreate the InteractiveViewer and edit the code you need.

See also: InteractiveViewer with constrained: false ignores Center widget and alignment #90517

Answer 2

Bit late but hope this helps you and if not, someone else.

While alignment for InteractiveViewer with constrained: false appears to be always top-left (and there isn't an alignment property yet), there is a way I used to center a child:

Center(
      child: InteractiveViewer(
          constrained: false,
          child: Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              child: Center(
                  child: Column(
                    key: _columnKey,
                    children: List<Widget>.generate(
                        10, (int index) {
                      return Image.asset('assets/image.png');
                    }),
                  ),
              ),
          ),
        ),
      )

Basically, you create a container the size of your window within the interactive viewer (which InteractiveViewer will position top-left) then center whatever you want within that container.

This is my first answer on StackOverflow so apologies if anything isn't right.

Answer 3

In my case worked:

InteractiveViewer(
            clipBehavior: Clip.none,
            minScale: myMinScale,
            maxScale: myMaxScale,
            constrained: false,
            child: SizedBox(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height,
                child: buildImage(),