How to use GridView inside InteractiveViewer?

Question

I'm trying to create a game map using an InteractiveViewer for the panning/zooming and then a GridView to generate the grid of rows and columns. This is my build function:

  @override
  Widget build(BuildContext context) {
    return InteractiveViewer(
        constrained: false,
        transformationController: _transformationController,
        child: GridView.count(
          crossAxisCount: widget.map.columns,
          shrinkWrap: true,
          physics: NeverScrollableScrollPhysics(),
          children:
              List.generate(widget.map.rows * widget.map.columns, (index) {
            return Container(
                width: 100,
                height: 100,
                decoration: BoxDecoration(
                    border: Border.all(width: 1, color: Colors.white)),
                child: Text(index.toString()));
          }),
        ));
  }

However when running this code I keep getting errors such as:

The following assertion was thrown during performLayout(): 'package:flutter/src/rendering/viewport.dart': Failed assertion: line 1753 pos 16: 'constraints.hasBoundedWidth': is not true. Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause. In either case, please report this assertion by filing a bug on GitHub: https://github.com/flutter/flutter/issues/new?template=BUG.md The relevant error-causing widget was: GridView

RenderBox was not laid out: RenderCustomPaint#078ce relayoutBoundary=up3 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': Failed assertion: line 1702 pos 12: 'hasSize' The relevant error-causing widget was GridView

RenderBox was not laid out: RenderRepaintBoundary#07bb5 relayoutBoundary=up2 NEEDS-PAINT 'package:flutter/src/rendering/box.dart': Failed assertion: line 1702 pos 12: 'hasSize' The relevant error-causing widget was InteractiveViewer

I thought that setting shrinkWrap: true and removing the scroll would solve this but it hasn't. Using a Table like in this example works but I want to use a GridView as it's a lot cleaner and easier to work with in my opinion.

How can I fix this?

How to use GridView inside InteractiveViewer?

0 Answers