fluttergridview

flutter gridview problem with aspect ratio on different devices


I want to have a fixed height container in gridview. I am using following code. It is showing different height on different devices. Is there any way to control the height in a way that it look same on all devices.enter image description here

                            GridView.count(
                              shrinkWrap: true,
                              crossAxisCount: 2,
                              mainAxisSpacing: 0,
                              childAspectRatio:
                                  MediaQuery.of(context).size.width /
                                      (MediaQuery.of(context).size.height / 1),
                              crossAxisSpacing: 8,
                              children: _productData.map((opt) {
                                return _productCard(context, opt, cart);
                              }).toList(),
                            ),

Solution

  • I was able to resolve the issue by using the class here: https://github.com/flutter/flutter/issues/55290 and then using it like this

                                GridView.builder(
                                  itemCount: _productData.length,
                                  gridDelegate:
                                      SliverGridDelegateWithFixedCrossAxisCountAndFixedHeight(
                                    crossAxisCount: 2,
                                    crossAxisSpacing: 5,
                                    mainAxisSpacing: 5,
                                    height: 300.0,
                                  ),
                                  itemBuilder: (BuildContext ctx, int index) {
                                    var opt = _productData[index];
                                    return _productCard(context, opt, cart);
                                  },
                            ),