Проблема с изменением размера изображения внутри виджета столбца во флаттере

Question

У меня есть следующий фрагмент кода,

GridTile(
      child: Card(
        elevation: 5,
        child:  Image.network(imageUrl, fit: BoxFit.scaleDown,),
        ),
        ),
    ); 

, выдающий следующий вывод ..

Но когда я добавляю столбец на мою карту вот так ...

GridTile(
      child: Card(
        elevation: 5,
        child: Column(
          children: <Widget>[
               Image.network(imageUrl, fit: BoxFit.scaleDown,),
          ],
        ),
        ),
    );

У меня возникла следующая проблема переполнения ..

Чего мне здесь не хватает. Есть ли важные детали макета о колонке, о которых я должен позаботиться. Мне нужен столбец, чтобы я мог добавить любимую кнопку и описание продукта под изображением. Найдите ниже родительский виджет для справки.

return Scaffold(
    appBar: AppBar(
      title: Text('Shopify'),
    ),
    body: GridView.builder(
      itemBuilder: (context, index) => ProductItem(dummyProducts[index].title, dummyProducts[index].imageUrl),
      itemCount: dummyProducts.length,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        childAspectRatio: 3 / 2,
        crossAxisSpacing: 10,
        mainAxisSpacing: 10
      ),
    ),
  );

Answer 1

Ваши изображения имеют определенную пропорцию (соотношение ширины / высоты).

Используя gridDelegate с childAspectRatio, вы можете назначить соотношение GridTile внутри вашего GridView.

Настройте childAspectRatio или настройте соотношение изображений .

Воспользуйтесь этим номером, чтобы увидеть эффект:

childAspectRatio: 1    // square
childAspectRatio: 2    // horizontal rectangle
childAspectRatio: 0.5  // vertical rectangle

Answer 2

Заключив изображение в AspectRatio, наконец-то добились цели. Пожалуйста, найдите код ниже.

GridTile(
      child: Card(
        elevation: 5,
        child: Column(
          children: <Widget>[
            AspectRatio(
              aspectRatio: 1,
                child: Image.network(imageUrl, fit: BoxFit.scaleDown,),
            ),
          ],
        ),
      ),
    );