Установка определенной высоты для виджета Flutter's Card

Я пытаюсь увеличить высоту данной сетки карточек, чтобы они могли уместить больше информации, чем сейчас. Эти карточки обернуты GridView.count(), который сжимается, так как я собираюсь разместить больше вещей под этим виджетом.

На данный момент карточки выглядят следующим образом: вы можете видеть, что одна из них выходит за пределы текста внизу, что является нежелательным поведением (особенно когда я хочу, чтобы карточки имели некоторые отступы снизу):

введите описание изображения здесь

В этом случае я хотел бы знать, можно ли вручную изменить высоту карты. Я, возможно, позволю этой конкретной конфигурации остаться и удалить некоторую информацию, поскольку мне нравится тот факт, что карты в настоящее время сохраняют свою пропорцию 1x1, но из любопытства я хотел бы узнать, как это сделать.

Я пробовал много вещей, например, оборачивал виджет Card Container или SizedBox и вручную устанавливал высоту, но ни один из этих подходов ничего не менял.

Я предполагаю, что проблема может быть в самом GridView. Вот как это выглядит:

return FutureBuilder<List<Event>>(
        future: new EventsService().getEventsForCoords(),
        builder: (context, AsyncSnapshot<List<Event>> snapshot) {
          if (snapshot.hasData) {
            return GridView.count(
                crossAxisCount: 2,
                shrinkWrap: true,
                children: generateProximityEventCards(snapshot.data));

          } else {
            return CircularProgressIndicator();
          }
        });

Как вы можете догадаться, метод generateProximityEventCards - это метод, который печатает Card виджеты в конце. На данный момент метод выглядит так:

List<Widget> generateProximityEventCards(List<Event> eventList) {
    // Render each card
    return eventList.map((Event ev) {
      return Card(
          semanticContainer: true,
          clipBehavior: Clip.antiAliasWithSaveLayer,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.0),
          ),
          elevation: 5,
          margin: EdgeInsets.all(7),
          child: SizedBox(
            height: 600,
            child: Column(
              children: <Widget>[
                Image(
                  alignment: Alignment.topCenter,
                  fit: BoxFit.fitWidth,
                  image: ev.imageUrl,
                  height: 110,
                  width: 200,
                ),
                Container(
                  child: Text(ev.name),
                  padding: EdgeInsets.only(left: 10, right: 10),
                ),
                Container(
                  child: Text(ev.startDate.toString()),
                  padding: EdgeInsets.only(left: 10, right: 10),
                ),
                Container(
                  child: Text(ev.address),
                  padding: EdgeInsets.only(left: 10, right: 10),
                ),
              ],
            ),
          ));
    }).toList();
  }

Итак, в заключение: как я могу изменить высоту карточек, чтобы они содержали больше информации?

Спасибо!


person Zerok    schedule 24.07.2020    source источник


Ответы (1)


GridView на самом деле не предназначен для использования плиток разного размера. Хороший вариант - использовать пакет flutter_staggered_grid_view.

динамические размеры плитки

Теперь размеры ваших плиток могут быть даже динамическими, проверьте код для гифка выше!

Чтобы автоматически разместить где-нибудь текст переменной длины, вы можете использовать пакет auto_size_text.

person Hossein Yousefi    schedule 24.07.2020