Флаттер. Столбец mainAxisAlignment spaceBetween не работает

Question

Мне нужно расположить виджеты вверху и внизу, как на этой картинке.

Для этого я использую следующую структуру:

          Column(
       mainAxisAlignment: MainAxisAlignment.spaceBetween,
       children:[
         Column(
            children:[Container(), Container()] // top widgets
               ),
         Container() // bottom widget

             ])

Но это не работает, у меня виджеты расположены строго один под другим. См. Также изображение:

Я попытался обернуть внешний столбец расширенным виджетом, но затем получил эту ошибку:

Дочерние элементы RenderFlex имеют ненулевую гибкость, но входящие ограничения ширины не ограничены.

Когда строка находится в родительском элементе, который не обеспечивает ограничение конечной ширины, например, если он находится в горизонтальной прокручиваемой строке, она будет пытаться сжать свои дочерние элементы по горизонтальной оси. Установка гибкости для дочернего элемента (например, с использованием Expanded) указывает, что дочерний элемент должен расширяться, чтобы заполнить оставшееся пространство в горизонтальном направлении. Эти две директивы исключают друг друга. Если родитель должен сжать своего дочернего элемента, дочерний элемент не может одновременно расширяться, чтобы соответствовать своему родительскому элементу.

Рассмотрите возможность установки mainAxisSize на MainAxisSize.min и использования FlexFit.loose для гибких дочерних элементов (с использованием гибкого, а не расширенного). Это позволит гибким дочерним элементам иметь размер меньше, чем бесконечное оставшееся пространство, которое они в противном случае были бы вынуждены занять, а затем заставит RenderFlex сжимать дочерние элементы, а не расширяться, чтобы соответствовать максимальным ограничениям, предоставленным родителем.

Я также попытался добавить mainAxisSize: MainAxisSize.max для столбца, но это не помогло.

PS мой внешний столбец находится внутри строки, может в этом проблема?

Моя полная структура:

      Card(
 child:Padding(
   ...,
   child:Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(... ),
              const SizedBox(width: 4),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: const [
                      Text(...),
                      Text(...),
                    ],
                  ),
                  Container(...)
                ],
              )
            ],
          )

Последний экран, который я пытаюсь получить, выглядит так:

Пожалуйста помогите

Answer 1

Просто используйте spacer()между двумя Columnи вы можете использовать flex в Row

      Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Expanded(
            flex: 2,
            child: Container(
              color: Colors.yellow,
              height: MediaQuery.of(context).size.height,
            ),
          ),
          SizedBox(width: 4,),
          Expanded(
            flex: 4,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Expanded(
                  child: Column(children: [
                    Column(
                      children: [
                        Container(
                          color: Colors.green,
                          height: 50,
                        ),
                        Container(
                          color: Colors.blue,
                          height: 50,
                        ),
                      ], // top widgets
                    ),
                    Spacer(),
                    Container(
                      color: Colors.brown,
                      height: 50,
                    ) // bottom widget
                  ]),
                ),
                SizedBox(width: 4,),
                Expanded(
                  child: Container(
                    color: Colors.brown,
                    height: 50,
                  ),
                ),
              ],
            ),
          )
        ],
      )

выход:

Answer 2

Ну вот !

                Row(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
            Expanded(child: containerWithBorder),
            Expanded(
                child: Column(
              children: [
                containerWithBorder,
                containerWithBorder,
                Spacer(),
                containerWithBorder,
              ],
            )),
            Expanded(
                child: Column(
              children: [
                containerWithBorder,
                Spacer(),
              ],
            ))
          ]),

Answer 3

вам нужно обрезать этот столбец с помощью контейнера или sizebox

      SizedBox(
                  height: 250,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          const Text('Country'),

                          const Text('Country'),
                        ],
                      ),
                    ],
                  ),
                )

Answer 4

проверить этот пример

      Column(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
      Expanded(
        flex: 3,
        child: Column(children: [
          Container(height: 100, color: Colors.green),
          Container(height: 100, color: Colors.red)
        ] // top widgets
            ),
      ),
      Container(height: 100, color: Colors.red) // bottom widget
    ]);