Виджет стека не работает внутри GridView.builder()

Я пытаюсь сделать следующий дизайн:

enter image description here

Я использую Firebase в качестве своего бэкэнда в качестве службы, и у меня возникают проблемы с работой моего кода. Ошибок нет, но визуальный интерфейс выглядит прикольно. Я пытаюсь создать GridView.builder() и отобразить сетку моего пользовательского интерфейса (проекты представлены ниже), но изображение не работает должным образом. Вы увидите, что голубой цвет — это цвет фона, и изображение должно покрывать всю ячейку, даже за контейнером с текстовым виджетом. Проверьте код:

return GridView.builder(
                      shrinkWrap: true,
                      itemCount: locations.length,
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 4,
                        mainAxisSpacing: 37,
                        crossAxisSpacing: 37,
                      ),
                      itemBuilder: (context, index) {
                        Location location = locations[index];
                        return MouseRegion(
                          cursor: SystemMouseCursors.click,
                          child: GestureDetector(
                            child: Container(
                              decoration: BoxDecoration(
                                color: blue100,
                                borderRadius: BorderRadius.circular(
                                  20,
                                ),
                              ),
                              child: Stack(
                                children: [
                                  ClipRRect(
                                    child: Image.network(
                                      location.image,
                                      fit: BoxFit.cover,
                                    ),
                                    borderRadius: BorderRadius.circular(20),
                                  ),
                                  Container(
                                    child: Column(
                                      mainAxisAlignment: MainAxisAlignment.end,
                                      children: [
                                        Container(
                                          decoration: BoxDecoration(
                                            color: isLight
                                                ? Color(0xFFF2F2F2)
                                                : Colors.black,
                                            borderRadius: BorderRadius.only(
                                              bottomLeft: Radius.circular(
                                                20,
                                              ),
                                              bottomRight: Radius.circular(
                                                20,
                                              ),
                                            ),
                                          ),
                                          height: isSmall ? 44 : 67,
                                          child: Center(
                                            child: CustomText(
                                              text: locations[index].street,
                                              size: isSmall ? 12 : 15,
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        );
                      },
                    );

Вот что вызывает этот код: enter image description here

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

Почему это? Это что-то с GridView..?

3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
0
0
36
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я также пробовал это без стека, см. ниже код, надеюсь, он вам поможет. добавьте некоторые изменения в мой код с вашим кодом, таким как изображение и текст, добавьте ниже код дизайна внутри GridView.builder()

Card(
      elevation: 5,
      shadowColor: Colors.grey,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(
          20,
        ),
      ),
      margin: EdgeInsets.all(5),
      child: Container(
        height: 200,
        width: 200,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Expanded(
              child: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(
                      10,
                    ),
                    topRight: Radius.circular(
                      10,
                    ),
                  ),
                  image: DecorationImage(
                    fit: BoxFit.fill,
                    image: NetworkImage(
                      'https://miro.medium.com/max/1400/1*-6WdIcd88w3pfphHOYln3Q.png',
                    ),
                  ),
                ),
              ),
            ),
            Container(
              alignment: Alignment.center,
              padding: const EdgeInsets.all(8.0),
              decoration: BoxDecoration(
                color: Colors.grey.shade300,
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(20.0),
                  bottomRight: Radius.circular(20.0),
                ),
              ),
              child: Text(
                '300 E Mejor Dr.',
              ),
            ),
          ],
        ),
      ),
    ),

Экран результатов-> output

Другие вопросы по теме