flutter - How do you contain a Interactive Viewer to a box?

Question

I'm trying to create an app to control a matrix of LEDs, I want the user to be able to select the color for each box. User can zoom in to be able to select individual boxes.

I seems like Interactive Viewer would work, the issue I'm having is when the user zooms in it fills the screen, is there a way to "clip" the rest of the view to the same size as the original?

Can you contain an interactive view within a box? I don't want the zoomed image to leave said box. I've tried looking to clipping but I'm not sure if it works with interactive viewer

question from:https://stackoverflow.com/questions/65909436/how-do-you-contain-a-interactive-viewer-to-a-box

Answer 1

To limit the InteractiveViewer boundary, you can put it in a Column, put the below panel inside an Expanded widget and set the width and height of the inside Container.

Working code:

class SomeScreen extends StatefulWidget {
  @override
  _SomeScreenState createState() => _SomeScreenState();
}

class _SomeScreenState extends State<SomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            height: 220,
            child: InteractiveViewer(
              minScale: 1,
              maxScale: 3,
              child: Container(
                color: Colors.cyanAccent,
                padding: EdgeInsets.symmetric(horizontal: 5),
                child: GridView.count(
                  crossAxisCount: 10,
                  crossAxisSpacing: 5,
                  mainAxisSpacing: 5,
                  children: List<Widget>.generate(
                    50,
                    (index) => Container(
                      width: 10,
                      height: 10,
                      color: Colors.red,
                    ),
                  ),
                ),
              ),
            ),
          ),
          Expanded(
            child: Container(
              color: Colors.white,
              height: double.infinity,
              width: double.infinity,
              child: Text("HELLO"),
            ),
          )
        ],
      ),
    );
  }
}

Demo video: