flutter multi-layered gridviews

25 Views Asked by At

Not sure how to describe the title of this question properly but what I am essentially trying to do is to have a grid (it's for a board game app) that has multiple layers. So something along the lines of:

          Container(
            height: 411,
            width: MediaQuery.of(context).size.width,
            child: GridView.builder(
              itemCount: 8 * 8,
              physics: const NeverScrollableScrollPhysics(),
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 8),
              itemBuilder: (context, index) {
                int row = index ~/ 8;
                int col = index % 8;
                return Stack(
                  children: [
                    boardSquare(
                      visibileBoardTile: playingBoard[row][col],
                      onTap: () => modelSelected(row, col),
                    ),
                    gamePiece(
                      visibilePieceTile: boardPieces[row][col],
                      isSelected: isSelected,
                      onTap: () => modelSelected(row, col),
                      onDoubleTap: () {},
                      onLongPress: () {},
                    ),
                  ],
                );
              },
            ),
          ),

Where the basic idea is to have an underlying "playing board" of static tiled images, and over the top of this, have a layer of "game pieces" that sit on top of this layer. This way you can move the top layer around, and moving a game piece off a playing board square can then reveal the playing board square underneath it.

The issue with the whole thing is that with that top layer, you cannot have "nothing" in any square. It cannot be null. So if there is no game piece in a particular square you can't see the playing board square underneath at all, it just gets covered in a non-null error. Or you can populate the entire top game piece layer with pieces, and there will be no errors, but you will never see the underlying playing board.

I need a way to essentially make the top game pieces layer "transparent" so that when there is no game piece in a particular square, you instead see the playing board underneath (EDIT: and very importantly here this bottom layer should also be clickable, in order to be able to move the top layer pieces to an empty square).

0

There are 0 best solutions below