How to set the fixed height of the container inside the GridView.builder? should not depending on childAspectRatio

问题

Actually I am trying to show a list of products inside the GridView.builder, but it's height changing as per childAspectRatio as per different devices of different heights. I want to fix them for every device...

回答1:

I had the same issue and ended up calculating the childAspectRatio so that each cell ends up having the height that I want.

double cellWidth = ((MediaQuery.of(context).size.width - allHorizontalPadding) / columnCount);
double desiredCellHeight = 200;
double childAspectRatio = cellWidth / desiredCellHeight;

回答2:

To do something like this you may want to use https://pub.dev/packages/flutter_staggered_grid_view

You will be able to adapt the layout more easily, otherwise with the GridView you have no choice you have to use childAspectRatio.

You can use it with MediaQuery properties to achieve a good design on every devices.

回答3:

Create something like this

First of all create a list of array class and override build method

class Products extends StatefulWidget {
  @override
  _ProductsState createState() => _ProductsState();
}

class _ProductsState extends State<Products> {
  var productList = [
    {
      'name': "Blazzer",
      "picture": "images/products/blazer1.jpeg",
      "old_price": 120,
      "price": 85,
    },
    /*{
      'name': "Blazzer",
      "picture": "images/products/blazer2.jpeg",
      "old_price": 120,
      "price": 85,
    },*/
    {
      'name': "Red Dress",
      "picture": "images/products/dress1.jpeg",
      "old_price": 120,
      "price": 85,
    },
    /* {
      'name': "Blazzer",
      "picture": "images/products/dress2.jpeg",
      "old_price": 120,
      "price": 85,
    }*/
  ];

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
        itemCount: productList.length,
        gridDelegate:
            SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
        itemBuilder: (BuildContext context, int index) {
          return SingleProduct(
            productName: productList[index]['name'],
            productPicture: productList[index]['picture'],
            productOldPrice: productList[index]['old_price'],
            productPrice: productList[index]['price'],
          );
        });
  }
}

and create the above class like below

class SingleProduct extends StatelessWidget {
  final productName;
  final productPicture;
  final productOldPrice;
  final productPrice;

  const SingleProduct(
      {this.productName,
      this.productPicture,
      this.productOldPrice,
      this.productPrice});

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Hero(
        tag: productName,
        child: Material(
          child: InkWell(
            onTap: () => Navigator.of(context).push(MaterialPageRoute(
                builder: (context) => ProductDetails(
                      //Passing Product details to another activity
                      productDetailName: productName,
                      productDetailNewPrice: productPrice,
                      productDetailOldPrice: productOldPrice,
                      productDetailPicture: productPicture,
                    ))),
            child: GridTile(
                footer: Container(
                  color: Colors.white70,
                  child: ListTile(
                    leading: Text(
                      productName,
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                    title: Text(
                      "\$$productPrice",
                      style: TextStyle(
                          color: Colors.red, fontWeight: FontWeight.w800),
                    ),
                    subtitle: Text(
                      "\$$productOldPrice",
                      style: TextStyle(
                          color: Colors.black54,
                          fontWeight: FontWeight.w800,
                          decoration: TextDecoration.lineThrough),
                    ),
                  ),
                ),
                child: Image.asset(
                  productPicture,
                  fit: BoxFit.cover,
                )),
          ),
        ),
      ),
    );
  }
}

来源：https://stackoverflow.com/questions/59926271/how-to-set-the-fixed-height-of-the-container-inside-the-gridview-builder-should