How to set the background colour of a flutter tablecell?

Question

The following code produces a table with 3 rows and 3 columns. In the second row the colour of the first and third cell is not showing up - I guess the contained Containers are just not getting sized right and so are invisible resulting in a white cell on either side of the central red cell. How can I force the colour of the side cells? Also is there a way to force the table to be perfectly square given that I do not know the size of the screen or possibly of the icon? I basically want the central cell to contain my data and the other cells to act as thin borders that can be individually coloured at runtime.

Attached an image of my app showing a bunch of these tables in a Gridview.count(). Notice the white space beneath each row of the grid. How can I get rid of that empty space?

return GestureDetector(
  onTap: () => print('$name was tappped'),
  child: Table(columnWidths: {
    0: FixedColumnWidth(10.0),
    1: FlexColumnWidth(),
    2: FixedColumnWidth(10.0)
  }, children: [
    TableRow(children: [
      TableCell(
        child: Container(
          color: Colors.black,
          child: SizedBox(
            width: 10.0,
            height: 10.0,
          ),
        ),
      ),
      TableCell(
        child: Container(
          color: Colors.blue,
          child: SizedBox(
            height: 10.0,
          ),
        ),
      ),
      TableCell(
        child: Container(
          color: Colors.green,
          child: SizedBox(
            width: 10.0,
            height: 10.0,
          ),
        ),
      ),
    ]),
    TableRow(
      children: [
        TableCell(
          child: Container(
            color: Colors.blue,                 
            child: SizedBox(
              width: 10.0,
            ),
          ),
        ),
        TableCell(
          child: Container(
            color: Colors.red,
            alignment: Alignment.center,
            child: Center(
              child: Icon(
                icon,
              ),
            ),
          ),
        ),
        TableCell(
          child: Container(
            color: Colors.blue,
            child: SizedBox(
              width: 10.0,
            ),
          ),
        ),
      ],
    ),
    TableRow(children: [
      TableCell(
        child: Container(
          color: Colors.green,
          child: SizedBox(
            width: 10.0,
            height: 10.0,
          ),
        ),
      ),
      TableCell(
        child: Container(
          color: Colors.greenAccent,
          child: SizedBox(
            height: 10.0,
          ),
        ),
      ),
      TableCell(
        child: Container(
          color: Colors.grey,
          child: SizedBox(
            width: 10.0,
            height: 10.0,
          ),
        ),
      ),
    ]),
  ]),
);

Thanks!

Answer 1

I got around my problems by wrapping the inner tables in some TableRows in another Table (inside a centered and squared SizedBox) instead of a GridView and strictly sizing the cells and columns in the inner tables with the help of some media queries. New code is below. There are still some issues regarding Flexibly sized widgets inside Tables that is tricky and that I need to understand for later but maybe with this approach I can avoid most of that in this project. I also had to correct the inner Table's columnWidths parameters which are indexed from 0 rather than 1.

return Table(columnWidths: {
      0: FixedColumnWidth(wallThickness),
      1: FixedColumnWidth(roomLength),
      2: FixedColumnWidth(wallThickness)
    }, children: [
      TableRow(children: [
        TableCell(
          child: Container(
            color: wallColor,
            child: SizedBox(
              height: wallThickness,
              width: wallThickness,
            ),
          ),
        ),
        TableCell(
          child: Container(
            color: wallColor,
            child: SizedBox(
              height: wallThickness,
              width: double.infinity,
            ),
          ),
        ),
        TableCell(
          child: Container(
            color: wallColor,
            child: SizedBox(
              height: wallThickness,
              width: wallThickness,
            ),
          ),
        ),
      ]),
      TableRow(
        children: [
          TableCell(
            child: Container(
              color: wallColor,
              child: SizedBox(
                height: roomLength,
                width: wallThickness,
              ),
            ),
          ),
          TableCell(
            child: GestureDetector(
              onTap: () => print('$name was tappped'),
              child: Container(
                color: floorColor,
                alignment: Alignment.center,
                child: SizedBox(
                  width: roomLength,
                  height: roomLength,

                ),
              ),
            ),
          ),
          TableCell(
            child: Container(
              color: wallColor,
              child: SizedBox(
                width: wallThickness,
                height: roomLength,
              ),
            ),
          ),
        ],
      ),
      TableRow(children: [
        TableCell(
          child: Container(
            color: wallColor,
            child: SizedBox(
              width: wallThickness,
              height: wallThickness,
            ),
          ),
        ),
        TableCell(
          child: Container(
            color: wallColor,
            child: SizedBox(
              width: roomLength,
              height: wallThickness,
            ),
          ),
        ),
        TableCell(
          child: Container(
            color: wallColor,
            child: SizedBox(
              width: wallThickness,
              height: wallThickness,
            ),
          ),
        ),
      ]),
    ]);

PS: I eventually stopped using tables for this app and went with basic rows and columns.

Answer 2

i think you can put the cell in a Container and wrap it to Expanded then you can set the background color

        Table( 
            children: 
            [
              TableRow( 
                  children: [ 
                    Expanded(
                        child: Container(color: Colors.grey, child: Center(child: Text('??????')))
                    ), 
                    Expanded(
                        child: Container(color: Colors.grey, child: Center(child: Text('??????')))
                    ), 
                    Expanded(
                        child: Container(color: Colors.grey, child: Center(child: Text('?????')))
                    ), 
                    Expanded(
                        child: Container(color: Colors.grey, child: Center(child: Text('?????')))
                    ), 
                    Expanded(
                        child: Container(color: Colors.grey, child: Center(child: Text('?????')))
                    ), 
                    Expanded(
                        child: Container(color: Colors.grey, child: Center(child: Text('??????')))
                    ), 
                  ] 
              ) 
            ]
        ),