Question 211137 in Flutter Question posted in
The official Flutter documentation can be found here.

how to get occupied height and width of gridview item in flutter?

how to get gridview item’s height and width so that i can design responsive item based on gridview’s cross axis count….

GridView.builder(
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(

                    mainAxisSpacing: 16,
                    crossAxisSpacing: 8,
                    childAspectRatio: 0.8,
                    crossAxisCount: 4,//will change its based on requirnment


                  ),
                  itemBuilder: (context,index){
                    return CustomContainer(height:??,width:??);
                  })
Tags:

2

Answers


  1. 0

    you can calculate these dimensions using the Mediaquery

    example:

    import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const int crossAxisCount = 4; //will change its based on requirnment
    const double crossAxisSpacing = 8;
    const double childAspectRatio = 0.8;

    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Material App Bar'),
        ),
        body: GridView.builder(
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            mainAxisSpacing: 16,
            crossAxisSpacing: crossAxisSpacing,
            childAspectRatio: childAspectRatio,
            crossAxisCount:
                crossAxisCount,
          ),
          itemBuilder: (context, index) {
            // Get the screen width using Mediaquery
            double screenWidth = MediaQuery.of(context).size.width;

            // Calculate the width of each item taking into account spacing and number of items in axis
            double itemWidth =
                (screenWidth - ((crossAxisCount - 1) * crossAxisSpacing)) /
                    crossAxisCount;

            double itemHeight = itemWidth / childAspectRatio;

            //Change Container to you CustomContainer
            return Container(
              height: itemHeight,
              width: itemWidth,
              color: Colors.red,
            );
          },
        ),
      ),
    );
  }
}
    Login or Signup to reply.
  2. 0

    GridView’s children size depends on childAspectRatio. If you like to provide different size for the itemBuilder, you need to wrap with another widget that will be used to handle the parent constraints.

    class TestGrid extends StatelessWidget {
  const TestGrid({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          final currentViewWidth = constraints.maxWidth;
          final currentViewHeight = constraints.maxHeight;
          bool isLargeScreen = currentViewWidth > 1200;
          return GridView.builder(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              mainAxisSpacing: 16,
              crossAxisSpacing: 8,
              childAspectRatio: isLargeScreen ? 1.5 : 1.2, //handle the child size
              crossAxisCount: isLargeScreen ? 4 : 2,
            ),
            itemBuilder: (context, index) {
              return LayoutBuilder(
                builder: (BuildContext context, BoxConstraints constraints) {
                  final width = constraints.maxWidth;
                  final height = constraints.maxHeight;
                  return Center(
                    //this will take the constraints of GridView.builder, which is comes from `childAspectRatio`
                    child: Container(
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        color: Colors.grey,
                        borderRadius: BorderRadius.circular(10),
                      ),
                      child: ColoredBox(color: index.isEven ? Colors.red : Colors.blue, child: Text("$width x $height")),
                    ),
                  );
                },
              );
            },
          );
        },
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search