Необходимо управлять высотой столбца и передавать переменные как свойство виджета

Question

Это мой код для виджета карты. Это будет go в качестве дочернего элемента виджета ListView.builder

class CardHome extends StatefulWidget {
  String cardHead;
  String cardDesc;
  String cardTime;
  String cardDate;

  CardHome(
      {this.cardHead, this.cardDesc, this.cardTime, this.cardDate});

  @override
  _CardHomeState createState() => _CardHomeState();
}

class _CardHomeState extends State<CardHome> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(globals.blockSizeHorizontal * 6,
          globals.blockSizeVertical * 3, globals.blockSizeHorizontal * 6, 0),
      width: globals.blockSizeHorizontal * 87,
      child: Card(
        shape: RoundedRectangleBorder(
            borderRadius:
                BorderRadius.circular(SizeConfig.blockSizeHorizontal * 4.5)),
        color: Color(globals.secColor),
        elevation: 0,
        child: Container(
          padding: EdgeInsets.symmetric(
              vertical: globals.blockSizeVertical * 2.7,
              horizontal: globals.blockSizeHorizontal * 6.5),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Container(
                    width: globals.blockSizeHorizontal * 56,
                    child: Text(
                      'Buy Plane Tickets',
                      overflow: TextOverflow.ellipsis,
                      maxLines: 2,
                      style: TextStyle(
                          height: globals.blockSizeVertical * 0.14,
                          fontFamily: 'Gilroy',
                          fontWeight: FontWeight.bold,
                          fontSize: globals.blockSizeHorizontal * 3.5,
                          letterSpacing: globals.blockSizeHorizontal * 0.1,
                          color: Color(0xff171b20)),
                    ),
                  ),
                  Text(
                    '8:20',
                    style: TextStyle(
                        fontFamily: 'Arboria',
                        fontWeight: FontWeight.w400,
                        fontSize: globals.blockSizeHorizontal * 3.8,
                        color: globals.inactHeadTextColor),
                  ),
                ],
              ),
              SizedBox(
                height: globals.blockSizeVertical * 2,
              ),
              Container(
                width: globals.blockSizeHorizontal * 70,
                child: Text(
                  'Buy Tickets for departure on 14th May, 2020 at 2:15pm',
                  overflow: TextOverflow.ellipsis,
                  maxLines: 3,
                  style: TextStyle(
                      fontFamily: 'Gilroy',
                      fontWeight: FontWeight.w600,
                      fontSize: globals.blockSizeHorizontal * 3.5,
                      letterSpacing: globals.blockSizeHorizontal * 0.02,
                      color: Color(0xff171b20)),
                ),
              ),
              SizedBox(height: globals.blockSizeVertical * 2),
              Text(
                '23 January',
                style: TextStyle(
                    fontFamily: 'Arboria',
                    fontWeight: FontWeight.w400,
                    fontSize: globals.blockSizeHorizontal * 3.3,
                    color: globals.inactHeadTextColor),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Как это выглядит:

Моя проблема в том, что столбец занимает полная доступная высота, как вы можете видеть на изображении (темная часть). Я даже пытался использовать mainAxisSize: MainAxisSize.min, но это не сработало. В любом случае, я могу исправить высоту, чтобы она выглядела как правильная карта?

Кроме того, как я уже сказал, мне нужно передать этот виджет в ListView.builder, чтобы cardHead, cardDes c, cardTime, cardDate переменные должны go вместо строк, которые я набрал вручную (например, купить билеты на самолет, 23 января и т. д. c) при прохождении виджета . Например, cardHead работает как свойство, которое я могу использовать в построителе списка следующим образом:

ListView.builder(
  itemCount: headers.length,
  itemBuilder: (context, index) {
    return CardHome(
      cardHead: Text('${headers.[index]}'),
      cardDesc: Text('${descriptions.[index]}'),
    );
  },
);

Answer 1

Ну, у меня была похожая проблема с моими собственными проектами (хотя и со строками, которые устанавливают ширину в бесконечность), и единственный удовлетворительный вывод, к которому я пришел, - это.

"Колонка" Виджет автоматически отменяет все без исключения ограничения высоты до бесконечности. Поэтому вам нужно вручную установить ограничения для каждого из дочерних виджетов внутри столбца.

Column(
  children: [
    Container(
      height: 50,
      child: [Your First Child Widget in the Column Here],
    )
    Container(
      height: 10,
      child: [Your Second Child Widget in the Column Here],
    ),
  ]
),

Это не всегда идеально, но работает. Также, если вам нужно что-то, что автоматически изменяет размер, вы можете вместо этого обернуть их в расширенный виджет.

Надеюсь, это поможет! (Примечание: вам нужно сделать то же самое со строками)

Answer 2

Вы можете попытаться добавить свойство высоты в контейнер

class _CardHomeState extends State<CardHome> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100 // for example 100