Shopify Question posted in
The Shopify help center can be found here.

Problem with Image resizing inside Column Widget in Flutter – Shopify

I have the following code snippet, 

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

producing following output..

enter image description here

But when I add column to my card like this… 

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

I got the below overflow issue..
enter image description here

What am I missing here., Is there any important layout details about Column that I need to take care of. I need column so that I can add favorite button and product description below the image. Find below the parent widget for reference.

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
      ),
    ),
  );
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Enclosing the image in AspectRatio finally did the trick. Please find the code below.

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

  2. 0

    Your images have a determined proportion (width / height ratio).

    Using gridDelegate with childAspectRatio you can assign the ratio of the GridTile inside your GridView.

    Adjust the childAspectRatio or adjust the images ratio.

    Play with this number to see the effect:

    childAspectRatio: 1    // square
childAspectRatio: 2    // horizontal rectangle
childAspectRatio: 0.5  // vertical rectangle
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search