[Flutter] Container 안에서 이미지 사이즈 원하는대로 조정하기

Container 안에 이미지를 넣어서 흰 배경에, 이미지가 작게 들어가도록 하고 싶었다.

그런데 자꾸 Container의 child인 이미지가 Container의 width, height를 따라가는 것이.. 문제였음(container를 꽉 채움)

Container(
  width: 130,
  height: 130,
  decoration: BoxDecoration(
    color: Colors.blue,		// 시각적으로 잘 보이도록 파란색으로 바꿈
    borderRadius: BorderRadius.circular(10),
  ),
  child: Image(
    image: AssetImage("assets/img/dummyPikachu.png"),
    width: 100,
    height: 100,
  ),
),

 

 

이런 식으로 나온다.

이렇게 되는 이유는, Container의 특성 때문인데,

Container는 Container에서 설정한 width, height 로 그 child Widget의 width 와 height 의 constraint를 설정해버린다.

위의 예시에서, 이미지의 width, height constraint는 130, 130이 되어 버림.

그렇기 때문에, Image Widget에서 설정한 width 와 height 는 무용지물이 되어 버리는 것이다.

 

이를 해결하려면, 이런 꼼수를 쓰면 된다.

Container(
  width: 130,
  height: 130,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(10),
  ),
  child: Center(
    child: Image(
      image: AssetImage("assets/img/dummyPikachu.png"),
      width: 100,
      height: 100,
    ),
  ),
),

Image Widget을 Center Widget으로 감싸주면 됨.

 

그럼 원하는대로 잘 나온다.

 

Reference

https://github.com/flutter/flutter/issues/20847