Unable to reduce gap between Image and Border in Flutter

Question

I have a flutter code where I am trying to give details about a course. There is an image that I have below which I added a text. I have added a border around the image to make it look good.

For some reason there is extra gap between the image and the borders and I am unable to figure out why.

Adding the code that I have done below

body: SingleChildScrollView(
    child: Column(
      children: [
        Image.asset(course.imagePath),
        Container(
          margin: const EdgeInsets.only(top: 15, right: 15, left: 15),
          alignment: Alignment.centerLeft,
          child: Text(
            course.title,
            style: const TextStyle(
              fontWeight: FontWeight.w700,
              fontSize: 18,
            ),
          ),
        ),
        SizedBox(
          height: 200,
          child: GridView.count(
            crossAxisCount: 3,
            physics: const NeverScrollableScrollPhysics(),
            shrinkWrap: true,
            children: [
              Container(
                decoration: BoxDecoration(
                  border: Border.all(
                    color: const Color(0xFF38B6FF),
                    width: 2.0,
                  ),
                ),
                child: Column(
                  children: [
                    Image.asset(
                      'Clock1.png',
                      height: 90,
                    ),
                    Text(course.time),
                  ],
                ),
              ),
              Column(
                children: [
                  Image.asset(
                    'Items1.png',
                    height: 100,
                  ),
                  Text(course.Date)
                ],
              ),
              Column(
                children: [
                  Image.asset(
                    'Picture1.png',
                    height: 100,
                  ),
                  Text(course.price)
                ],
              ),
            ],
          ),
        ),
        Container(
          margin: const EdgeInsets.only(right: 15, left: 15),
          alignment: Alignment.bottomLeft,
          child: Text(course.description),
        ),

And below is the image of what I am getting

Adding the image of the clock also to show that the image does not have any white spaces around that is making this happen

Please help me out in understanding why this is happening and how I can rectify it

Answer 1

The extra space is the result of the Container expands to the size of the given constraints from GridView. By default, the aspect ratio of a GridView child is 1.0, which means the ratio of the width to the height is 1:1. You can experiment changing the value for the aspect ratio by using the childAspectRatio parameter of GridView:

GridView.count(
  childAspectRatio: 0.5,
  // ...

Now you can see that the space is even larger, with double the previous height.

To let your widget shrinks to the height it needed, wrap the Container with Align and set the mainAxisSize of the Column to MainAxisSize.min:

GridView.count(
  // ...
  children: [
    Align( // (1) Wrap the Container with Align
      alignment: Alignment.topCenter, // (2) Set the alignment to top-center
      child: Container(
        // ...
        child: Column(
          mainAxisSize: MainAxisSize.min, // (3) Set the main axis size to min
          // ...
        ),
      ),
    ),
    // ...
  ],
)