How to make all widgets appear to be of same size in GridView in Flutter

Question

I am using GridView to show a different students on screen. I am using my custom made cards to show a student. Now, if the name of a student is very large, it is taking more space and rest of the cards are remaining of same size.

At first, when the name was too large, I was getting an error for less space. Then to fix that, I changed aspect ratio. But now, my screen seems too ditorted. Can you please help me out on how to fix this?

Here are the code snippets -

First, my card -

class CardItem extends StatelessWidget {
  final Widget imageUrl;
  final String title;
  final VoidCallback function;
  final BoxDecoration? bor;
  final String? board;
  final String? standard;

  const CardItem({
    Key? key,
    required this.imageUrl,
    required this.title,
    required this.function,
    this.bor,
    this.board,
    this.standard
  })
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: function,
      child: Column(
        children: [
          Card(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8),
            ),
            color: cardColor,
            child: Container(
              padding: EdgeInsets.all(getProportionateScreenHeight(22)),
              decoration: bor,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  CircleAvatar(
                    radius: 50.0,
                    child: imageUrl,
                  ),
                  SizedBox(
                    height: getProportionateScreenHeight(11),
                  ),
                  Text(
                    title,
                    style: Theme.of(context)
                        .textTheme
                        .bodyText2!
                        .apply(color: Colors.white),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 7.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          board??"",
                          style: TextStyle(
                            color: brandPurple,
                            fontSize: 13,
                          ),
                        ),
                        Text(
                          standard??"",
                          style: TextStyle(
                            color: brandPurple,
                            fontSize: 13,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

How I used them in GridView -

                            child: GridView.count(
                              physics: ScrollPhysics(),
                              crossAxisSpacing:
                                  getProportionateScreenWidth(25.0),
                              mainAxisSpacing:
                                  getProportionateScreenHeight(0.0),
                              childAspectRatio: 2 / 3,
                              shrinkWrap: false,
                              crossAxisCount: 2,
                              children: [
                                for (int i = 0; i < dataList.length; i++)
                                  CardItem(
                                    imageUrl: dataList[i].avtar == null
                                        ? Image.asset(
                                            'assets/images/profile_pic.png')
                                        : CachedNetworkImage(
                                            imageUrl: dataList[i].avtar!,
                                            imageBuilder:
                                                (context, imageProvider) =>
                                                    Container(
                                              decoration: BoxDecoration(
                                                shape: BoxShape.circle,
                                                image: DecorationImage(
                                                    image: imageProvider,
                                                    fit: BoxFit.cover),
                                              ),
                                            ),
                                            placeholder: (context, url) =>
                                                CircularProgressIndicator(),
                                            errorWidget:
                                                (context, url, error) =>
                                                    Icon(Icons.error),
                                            // httpHeaders: {
                                            //   "Authorization":
                                            //       'JWT ' + token,
                                            // },
                                          ),
                                    title: dataList[i].name!,
                                    board: getBoard(
                                        dataList[i].student_current_board),
                                    standard: getGrade(
                                        dataList[i].student_current_board,
                                        dataList[i].grade),
                                    function: () {
                                      setState(() {
                                        selected_id = dataList[i].id!;
                                        print(dataList[i].name);
                                        Provider.of<APIData>(context,
                                                listen: false)
                                            .initializeCurrentStudent(
                                                dataList[i]);
                                      });
                                    },
                                    bor: selected_id == dataList[i].id!
                                        ? border_light()
                                        : BoxDecoration(),
                                  ),
                                Add(
                                  imageUrl:
                                      'assets/images/add_profile_icon.svg',
                                  title: 'Add Profile',
                                  function: () {
                                    Navigator.push(
                                      context,
                                      MaterialPageRoute(
                                          builder: (context) => AddProf()),
                                    ).then((value) => refresh());
                                  },
                                ),
                              ],
                            ),

Here is the UI that I am getting -

Answer 1

I think you can use the following package for equal and beautiful gridviews. Here's the link: https://pub.dev/packages/flutter_staggered_grid_view In this package you can use Masonry Gridview which will surely help you!

Answer 2

You can use

childAspectRatio: 0.75,

It will fix the height / width for all items.

Check the below code for example

class ItemCardGridView extends StatelessWidget {
  const ItemCardGridView(
  {Key? key,
  required this.crossAxisCount,
  required this.padding,
  required this.items})
  // we plan to use this with 1 or 2 columns only
  : assert(crossAxisCount == 1 || crossAxisCount == 2),
    super(key: key);
  final int crossAxisCount;
  final EdgeInsets padding;
  // list representing the data for all items
  final List<ItemCardData> items;

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
    padding: padding,
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: crossAxisCount,
      mainAxisSpacing: 40,
      crossAxisSpacing: 24,
      // width / height: fixed for *all* items
      childAspectRatio: 0.75,
    ),
    // return a custom ItemCard
    itemBuilder: (context, i) => ItemCard(data: items[i]),
    itemCount: items.length,
  );
 }
}