In Flutter, how can I set a fixed height for grid view items?

Question

I am creating a web application that utilizes a grid view to display items in a grid format. However, I am facing an issue where the height of the grid increases excessively. I have attempted to address this by setting an aspect ratio of 1.7, which works well at a specific screen size. Nevertheless, when the screen size changes, the height also adjusts accordingly, which is not my intended outcome. I am seeking a solution to maintain a fixed height for the grid regardless of the screen size. Below is the relevant code snippet for reference.

Expanded(
                  child:
                      // GridView.builder(
                      //   gridDelegate:
                      //       const SliverGridDelegateWithFixedCrossAxisCount(
                      //           childAspectRatio: 1.7, crossAxisCount: 2),
                      //   itemBuilder: (context, index) {
                      //     return Padding(
                      //       padding: const EdgeInsets.only(
                      //           left: 16, right: 16, top: 16),
                      //       child: DoctorProfileCard(
                      //           doctorName: '',
                      //           category: 'category',
                      //           concultancyTiming: 'concultancyTiming',
                      //           description: 'description',
                      //           imageUrl: 'imageUrl',
                      //           onClick: () {}),
                      //     );
                      //   },
                      // ),

                      GridView.custom(
                    gridDelegate: SliverWovenGridDelegate.count(
                      crossAxisCount: 2,
                      pattern: const [
                        WovenGridTile(1.7),
                      ],
                    ),
                    childrenDelegate: SliverChildBuilderDelegate(
                      (context, index) => Padding(
                        padding: const EdgeInsets.only(
                            left: 16, right: 16, top: 16),
                        child: DoctorProfileCard(
                            doctorName: '',
                            category: 'category',
                            concultancyTiming: 'concultancyTiming',
                            description: 'description',
                            imageUrl: 'imageUrl',
                            onClick: () {}),
                      ),
                    ),
                  ),
                )

Niko · Answer 1 · 2023-07-21T13:27:45.607

If you want to have a fixed height of the grid view items, then you have to do some calculating with the available screen width to calculate a cross axis count and aspect ratio depending on it.

In the following example you can set your prefered height and aspect ratio at the top. Of course the cross axis spacing and the padding around the grid view also affects the calculations, so you can also set it. For the max function, the import 'dart:math'; package is needed.


  return LayoutBuilder(builder: (BuildContext context, BoxConstraints constraints) {
    const double aspectRatio = 1.7;
    const double fixedHeight = 100;
    const double crossAxisSpacing = 10;
    const double paddingAround = 20;
    const double calculatedWidth = fixedHeight * aspectRatio;

    final double availableWidth = constraints.maxWidth - paddingAround * 2;
    final int crossAxisCount = max(1, availableWidth ~/ (crossAxisSpacing + calculatedWidth));
    final double childWidth = (availableWidth - (crossAxisCount - 1) * crossAxisSpacing) / crossAxisCount;
    final double childAspectRatio = childWidth / fixedHeight;

    return GridView.count(
      crossAxisCount: crossAxisCount,
      padding: const EdgeInsets.all(paddingAround),
      crossAxisSpacing: crossAxisSpacing,
      mainAxisSpacing: 10,
      childAspectRatio: childAspectRatio,
      children: <Widget>[for (int i = 0; i < 12; ++i) Container(color: Color.fromARGB(255, 10 * i, 1 * i, 50))],
    );
  });

In Flutter, how can I set a fixed height for grid view items?

1 Answers1