Stack Widget not working inside GridView.builder()

Question

I am trying to make the following design:

I am using Firebase as my backend as a service, and I am having trouble having my code work. There are no errors, but the UI visual looks funky.. I'm trying to create a GridView.builder() and display a grid of my UI (Designs provided below), but the image isn't working as it should be.. You'll see that the light blue is the background color, and the image should be covering the entire cell, even behind the container with the text widget. Check out the code:

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,
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        );
                      },
                    );

Here is what this code causes:

You can obviously see that the code is there, and the general thing is working, although the image doesn't want to cooperate and resizes itself differently.

Why is this? Is it something with the GridView..?

Answer 1

I have try this without Stack also, refer below code hope its help to you. add some changes in my code with your code like image and text add below design code inside 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.',
              ),
            ),
          ],
        ),
      ),
    ),

Result Screen->