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으로 감싸주면 됨.
그럼 원하는대로 잘 나온다.