Как установить цвет фона флаттера?

Question

Следующий код создает таблицу с 3 строками и 3 столбцами.Во втором ряду цвет первой и третьей ячеек не отображается - я думаю, что содержащиеся в нем контейнеры просто не имеют правильного размера и поэтому невидимы, что приводит к появлению белой ячейки по обе стороны от центральной красной ячейки.Как я могу заставить цвет боковых клеток?Также есть ли способ заставить таблицу быть идеально квадратной, учитывая, что я не знаю размера экрана или, возможно, значка?Я в основном хочу, чтобы центральная ячейка содержала мои данные, а другие ячейки действовали как тонкие границы, которые могут быть индивидуально окрашены во время выполнения.

Прикрепленное изображение моего приложения, показывающее кучу этих таблиц в Gridview.count(),Обратите внимание на пустое пространство под каждым рядом сетки.Как я могу избавиться от этого пустого пространства?

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,
          ),
        ),
      ),
    ]),
  ]),
);

Спасибо!

Answer 1

Я справился со своими проблемами, поместив внутренние таблицы в некоторые TableRows в другую таблицу (внутри SizedBox по центру и в квадрате) вместо GridView и строго определив размеры ячеек и столбцов во внутренних таблицах с помощью некоторых медиазапросов. Новый код ниже. Есть все еще некоторые проблемы, связанные с виджетами гибкого размера внутри таблиц, что сложно, и мне нужно разобраться позже, но, возможно, с этим подходом я могу избежать большей части этого в этом проекте. Я также должен был исправить параметры columnWidths внутренней таблицы, которые проиндексированы от 0, а не от 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,
            ),
          ),
        ),
      ]),
    ]);