Флаттер, как вы можете воссоздать макет на картинке, но с шириной одной строки, равной экрану? - PullRequest
Новая
       58

Флаттер, как вы можете воссоздать макет на картинке, но с шириной одной строки, равной экрану?

0 голосов
/ 01 февраля 2020

желаемое изображение макета (без ширины экрана)

desired

с использованием Expanders выдает ошибку: «У детей RenderFlex ненулевое сгибание, но входящие ограничения ширины не ограничены».

Мой код: 

SafeArea(
  child: Column(
    children: <Widget>[
      Row(
        children: <Widget>[
          Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  Container(
                    height: 50,
                    width: 50,
                    color: Colors.blue,
                  ),
                  Container(
                    height: 50,
                    width: 50,
                    color: Colors.green,
                  )
                ],
              ),
              Container(
                height: 50,
                width: 100,
                color: Colors.yellow,
              )
            ],
          ),
          Container(
            height: 50,
            width: 50,
            color: Colors.red,
          )
        ],
      ),
      SizedBox(
        height: 20,
      ),
      Row(
        children: <Widget>[
          Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  Container(
                    height: 50,
                    width: 50,
                    color: Colors.blue,
                  ),
                  Container(
                    height: 50,
                    width: 50,
                    color: Colors.green,
                  )
                ],
              ),
              Container(
                height: 50,
                width: 100,
                color: Colors.yellow,
              )
            ],
          ),
          Container(
            height: 50,
            width: 50,
            color: Colors.red,
          )
        ],
      ),
      SizedBox(
        height: 20,
      ),
      Row(
        children: <Widget>[
          Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  Container(
                    height: 50,
                    width: 50,
                    color: Colors.blue,
                  ),
                  Container(
                    height: 50,
                    width: 50,
                    color: Colors.green,
                  )
                ],
              ),
              Container(
                height: 50,
                width: 100,
                color: Colors.yellow,
              )
            ],
          ),
          Container(
            height: 50,
            width: 50,
            color: Colors.red,
          )
        ],
      ),
    ],
  ),
);

Моя конечная цель - не только синий, зеленый, желтый, красный контейнеры расширяются до ширины экрана, но также заменяют синие, зеленые, желтые контейнеры текстовыми полями. Возможно, это имеет значение, потому что размер текстовых полей соответствует размеру их родителей.

...