I have a problem in making cards with gridview and it isnt scrollable. Below is the code:

GridView.builder(
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2, // number of items in each row
                mainAxisSpacing: 8.0, // spacing between rows
                crossAxisSpacing: 8.0, // spacing between columns
                childAspectRatio: (0.5),
              ),
              scrollDirection: Axis.vertical,
              shrinkWrap: true,
              padding: EdgeInsets.all(MediaQuery.of(context).size.width *
                  1 /
                  15), // padding around the grid
              itemCount: CoffeeList.length,
              itemBuilder: (context, index) {
                Coffee cof = CoffeeList[index];
                return Container(
                    height: 250,
                    child: Card(
                        margin: const EdgeInsets.all(4),
                        child: Column(children: <Widget>[
                          Center(
                              child: Stack(children: <Widget>[
                            Container(
                              width:
                                  MediaQuery.of(context).size.width * 47 / 125,
                              height:
                                  MediaQuery.of(context).size.width * 47 / 125,
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(12),
                                  image: DecorationImage(
                                      image: AssetImage((cof.imageAsset)),
                                      fit: BoxFit.fill)),
                            ),
                            Container(
                              width: 60,
                              height: 30,
                              decoration: BoxDecoration(
                                  color: Colors.black.withOpacity(0.20),
                                  borderRadius: const BorderRadius.only(
                                      topLeft: Radius.circular(16),
                                      bottomRight: Radius.circular(16))),
                            ),
                            const Padding(
                                padding: EdgeInsets.symmetric(
                                    vertical: 5, horizontal: 5),
                                child: Icon(
                                  Icons.star_rounded,
                                  color: Colors.yellow,
                                  size: 20,
                                )),
                            Padding(
                                padding: const EdgeInsets.symmetric(
                                    horizontal: 28, vertical: 5),
                                child: Text(cof.star.toString(),
                                    style: const TextStyle(
                                        color: Colors.white,
                                        fontSize: 14,
                                        fontWeight: FontWeight.w600)))
                          ])),
                          Padding(
                              padding: EdgeInsets.symmetric(
                                  vertical: 12, horizontal: 6),
                              child: Text(cof.type,
                                  style: TextStyle(
                                    fontSize: 16,
                                    fontWeight: FontWeight.w600,
                                  )))
                        ])));
              },
            ),

Please ignore the large chunks of empty spaces as I wanted to deal with the overflow before adding more things.

Problem

I’ve tried using physics (NeverScrollableScrollPhysics) in GridView.builder and SingleChildScrollView yet nothing works

>Solution :

Wrap it with widgets like Flexible or Expanded if you put GridView inside Column or Row. If it is not then please share full widget tree, which covers this GridView