Как выровнять текст и изображение в SliverGrid в Flutter?

Question

Я использую функцию SliverGrid для создания моего gridView. Я пытаюсь разместить текст под изображением, но текст не совпадает с изображением и показывает ошибку Bottom Overflowed. Это код:

SliverPadding(
          padding: const EdgeInsets.only(left: 8, right: 8),
          sliver: SliverGrid(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              crossAxisSpacing: 20,
              mainAxisSpacing: 20,
            ),
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int i) {
                return GestureDetector(
                  onTap: () {},
                  child: Column(
                    children: <Widget>[
                      GridTile(
                        child: Image.network(
                          'https://images.unsplash.com/photo-1562176566-73c303ac1617?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80',
                          fit: BoxFit.cover,
                        ),
                      ),
                      Text(
                        'Sammy the Pup',
                        style: khomeStyle.copyWith(
                            color: kOrange, fontSize: 14),
                      ),
                    ],
                  ),
                );
              },
              childCount: 200,
            ),
          ),
        ),

И вот так выглядит сетка (Вывод вышеупомянутого):

И это то, что я хочу достичь:

Answer 1

Высота GridView определяется AspectRatio

SliverGridDelegateWithFixedCrossAxisCount(
            mainAxisSpacing: 5.0,
            crossAxisSpacing: 5.0,
            crossAxisCount: 2,
            childAspectRatio: 1 / 1,<---
          ),

. Когда AspectRatio становится меньше, высота становится больше, а когда отношение увеличивается, высота становится меньше