Flutter. 화면에 경고 영역이 생기면.. (Right Overflowed by N Pixels)

Right Overflowed by N Pixels. 

 

화면에 맞지 않는 큰이미지를 로드 했더니 다음 처럼 화면에 경고(주의) 영역이 표시되었다. 

이럴때는 다음과 같은 방법으로 해결할 수 있다. 

 

 

1. 실제 이미지 사이즈 줄이기

  디자인 툴을 이용하여 이미지의 실제 사이즈를 줄인다. 

  모바일 디바이스에 맞춰 디자인을 다시 한다. 

 

 

2. Image 위젯을 SizedBox로 감싸고 사이즈 변경하기 

  설정한 사이즈로 이미지사이즈가 변경된다. 

SizedBox(width: 200, child: Image.asset('assets/img/music.png'));

 

 

3. Image 위젯을 Flexible로 감싸기. 

  화면에 맞춰 이미지 사이즈가 자동으로 조절 된다. 

Flexible(child: Image.asset('assets/img/music.png'));