Question 400261 in Flutter Question posted in
The official Flutter documentation can be found here.

I can't zoom out with InteractiveViewer, Column and Row in Flutter

I have something like this:

InteractiveViewer(
                boundaryMargin: const EdgeInsets.all(20),
                minScale: 0.5,
                maxScale: 3.0,
                child: SingleChildScrollView(
                  child: Column(
                    children: [
                      Container(
                        color: Colors.red,
                        height: 100,
                        width: 100,
                      ),
                      Row(
                        children: [
                          Container(
                            color: Colors.pink,
                            width: 200,
                            height: 100,
                          ),
                          Container(
                            color: Colors.black,
                            width: 200,
                            height: 100,
                          ),
                          Container(
                            color: Colors.pink,
                            width: 200,
                            height: 100,
                          ),
                          Container(
                            color: Colors.black,
                            width: 200,
                            height: 100,
                          ),
                        ],
                      ),
                      Container(
                        color: Colors.green,
                        width: 1000,
                        height: 100,
                      ),
                      Container(
                        color: Colors.blue,
                        width: 200,
                        height: 200,
                      ),
                    ],
                  ),
                ),
              );

I never used this widget before and I’m trying to replicate a native behaviour so I could easily zoom in/out and scroll up/down. Like inspecting a photo on the phone.

Without any SingleChildScrollView I see the "overflowed" error. Not sure if that’s really necessary. Right now I can only scroll up/down but I can’t zoom out to see the whole thing

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I was just missing constrained: false


  2. 0

    To replicate the native behavior of inspecting a photo on the phone, where you can zoom in and out and scroll in all directions, you can use the InteractiveViewer without the SingleChildScrollView. The InteractiveViewer itself supports panning and zooming.

    In my opinion, you can do this like this:

    class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Interactive Viewer Example'),
        ),
        body: Center(
          child: InteractiveViewer(
            boundaryMargin: EdgeInsets.all(20),
            minScale: 0.1,
            maxScale: 3.0,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                  color: Colors.red,
                  height: 100,
                  width: 100,
                ),
                Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Container(
                      color: Colors.pink,
                      width: 200,
                      height: 100,
                    ),
                    Container(
                      color: Colors.black,
                      width: 200,
                      height: 100,
                    ),
                    Container(
                      color: Colors.pink,
                      width: 200,
                      height: 100,
                    ),
                    Container(
                      color: Colors.black,
                      width: 200,
                      height: 100,
                    ),
                  ],
                ),
                Container(
                  color: Colors.green,
                  width: 1000,
                  height: 100,
                ),
                Container(
                  color: Colors.blue,
                  width: 200,
                  height: 200,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

    }

    You should be able to zoom in and out and scroll in all directions to view the entire content. The InteractiveViewer will handle the scaling and panning of its child widgets.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search