Флаттер. Столбец mainAxisAlignment spaceBetween не работает внутри строки

Question

Я пытаюсь сделать такой экран:

Для этого я использую ListView с настраиваемым элементом. Вот мой код товара:

        @override
  Widget build(BuildContext context) {
    return Padding(
        padding: const EdgeInsets.all(10),
        child: Card(
          elevation: 5,
          color: Colors.greenAccent,
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(6)),
          child: Padding(
            padding: const EdgeInsets.all(12.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    SizedBox(
                      width: 65,
                      height: 65,
                      child: ClipRRect(
                          borderRadius: BorderRadius.circular(8),
                          child: Image.asset(
                            "assets/images/temp.png",
                            alignment: Alignment.center,
                          )),
                    ),
                    const SizedBox(width: 18),
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: const [
                              Text(
                                "Test title",
                                textAlign: TextAlign.left,
                                style: TextStyle(
                                    color: Colors.red,
                                    fontSize: 17,
                                    fontWeight: FontWeight.w500),
                              ),
                              Text(
                                "TestDescription",
                                style: TextStyle(
                                    color: Colors.deepOrangeAccent,
                                    fontSize: 15,
                                    fontWeight: FontWeight.w700),
                              ),
                            ],
                          ),
                          Spacer(),
                          CustomButton(
                            onPressed: () {},
                          )
                        ],
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ));
  }

Мне нужно выровнять заголовок и описание вверху, а настраиваемое внизу внизу. Для этого я использую Spacer () внутри столбца, и я обернул свой столбец расширенным виджетом. Но когда я оборачиваю свой виджет расширенным, я получаю такую ​​ошибку:

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

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

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

Когда я удаляю Expanded () и Spacer (), ошибка нет. Но я ошибаюсь. Смотрите на картинке:

Пожалуйста, помогите мне, что я делаю не так (

Answer 1

Вы можете использовать IntrinsicHeight в качестве родителя Rowчтобы получить желаемый результат с crossAxisAlignment: CrossAxisAlignment.stretch,, то для Rowsдети могут обернуть Flexibleили же Exapndedвиджет.

       @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(10),
      child: Card(
        elevation: 5,
        color: Colors.greenAccent,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(6)),
        child: Padding(
          padding: const EdgeInsets.all(12.0),
          child: IntrinsicHeight(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Flexible(
                  // or exapnded
                  // fit: FlexFit.tight,
                  flex: 1,
                  child: Container(
                    height: 65,
                    width: 64,
                    color: Colors.amber,
                    child: Text("Image"),
                  ),
                ),
                Flexible(
                  flex: 1,
                  fit: FlexFit.tight,
                  child: Column(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Column(
                        mainAxisSize: MainAxisSize.min,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          Text("Item 1"),
                          Text("Item 2"),
                        ],
                      ),
                      Text("Item b x"),
                    ],
                  ),
                ),
                Flexible(
                  flex: 1,
                  // fit: FlexFit.tight,
                  child: Container(
                    color: Colors.cyanAccent,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: const [
                        Text("lT"),
                        Text("lBsssssssssssss"),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }