Remove unwanted space inside a column while placing image at end in flutter?

Question

am new for flutter development i have got struck in placing the image in corner of the column which i have shown in the image

Need to remove the spacing which i have marked with arrow how to do this? now let me post what i tried so far:

Card(
                  margin: EdgeInsets.all(10),
                  clipBehavior: Clip.antiAlias,
                  shape: RoundedRectangleBorder(
                    side: BorderSide(color: Colors.white, width: 1),
                    borderRadius: BorderRadius.circular(20),
                  ),
                  color: Colors.white,
                  child: Container(
                    width: MediaQuery.of(context).size.width / 2.3,
                    height: 200,
                    // color: Colors.pink,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.end,
                      mainAxisSize: MainAxisSize.min,
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[
                        Container(
                          color: Colors.red,
                          child: Image.asset('assets/intersection_png.png',
                          fit: BoxFit.cover,),
                        )
                      ],
                    ),
                  ),
                )

Thanks in advance!!

I think the current answer is incorrect. Would you mind linking the image you are using? On a side note, my guess is that your Container is wrong, perhaps with the fit property. Have you tried placing the image directly in the Column itself? — Gregory Conrad, Jun 01 '20 at 17:28
@M.Yogeshwaran the image you provided does have padding (even if it is transparent pixels). See my answer. — Gregory Conrad, Jun 01 '20 at 17:46

Gregory Conrad · Accepted Answer · 2020-06-01T18:10:20.640

The image you posted has padding around it. Thus, Flutter displays it with padding. To fix this, you can open it in an image editor like GIMP and shrink the image size.

Here is the same image but with removed padding. Try this one out:

This comes with a downside, as it looks like the image had the padding so it could display elevation. You can either remove the elevation completely from the image and add it in Flutter yourself or you can keep the original image and use something like a Stack in combination with a Positioned widget to position it (but that would be a whole different question on its own).

As far as I can tell, none of the other answers will actually do what you desire due to your actual image, but perhaps I am wrong.

Edit: I also just realized I made a slight mistake when changing your image--I removed the padding on the left and bottom side. You can fix your original image yourself in an image editor and remove just top and right side padding.

score 0 · Answer 2 · answered Jun 01 '20 at 17:42

wrap your Container widget with Expanded and use BoxFit.fill like this:

 Expanded(
                  child: Container(
                    color: Colors.red,
                    child: Image.asset('assets/intersection_png.png',
                          fit: BoxFit.fill,
                    )
                  ),
                )

example:

score 0 · Answer 3 · answered Jun 01 '20 at 17:47

0

you should set the BorderSide color as transparent

and set the width equal to 0

side: BorderSide(color: Colors.transparent, width: 0),

answered Jun 01 '20 at 17:47

Amir

2,225
2
18
27

Remove unwanted space inside a column while placing image at end in flutter?

3 Answers3