[flutter] 플러터 어셋에 이미지 추가 시 안 불러와지는 문제

플러터(flutter)를 사용하면서 UI 디자인에 이미지를 추가할 때, 종종 이미지가 제대로 불러와지지 않는 문제에 직면하게 됩니다. 이 글에서는 플러터에서 어셋에 이미지를 추가한 후, 이를 불러와서 화면에 표시하는 방법과 관련된 문제 해결 방법을 제시하겠습니다.

 

1. 문제 발생

플러터(flutter)의 어셋(assets)에 이미지를 추가하고 저장하면 앱화면에 바로 적용이 되지 않는 문제가 발생했습니다. 플러터에서 이미지를 뿌리는 코드는 다양하겠지만 저같은 경우에는 다음 그림처럼 파일을 폴더에 추가하고 있습니다. 그런데 저장하면 없는 이미지라고 에러가 뜹니다.

 

2. 플러터에서 이미지 추가하기

플러터에서 이미지를 화면에 표시하는 가장 기본적인 방법은 Image.asset 함수를 사용하는 것입니다. 예를 들면, 아래와 같이 코드를 작성할 수 있습니다.

Container(
    child: Image.asset('assets/images/Bg.png'),
    width: 100,
    height: 100,
)

 

3. 추가한 이미지가 보이지 않는 문제

이렇게 코드를 작성하고 실행했을 때, "없는 이미지"라는 에러 메시지가 표시될 수 있습니다. 이는 플러터 프로젝트가 이미지를 제대로 인식하지 못하기 때문입니다.

 

4. 문제 해결 방법

이 문제를 해결하기 위해서는 아래의 단계를 따라야 합니다.

• 디버깅 연결 해제:
  • 먼저 실행 중인 앱의 디버깅 연결을 중단합니다.
• pubspec.yaml 파일 확인:
  • 플러터 프로젝트의 pubspec.yaml 파일을 열고, 해당 이미지의 경로가 올바르게 지정되어 있는지 확인합니다.
• Pub get 실행:
  • pubspec.yaml 파일에서 Pub get 버튼을 클릭하여 프로젝트의 의존성을 업데이트합니다.
  • 이 과정에서 어셋의 이미지 파일이 앱의 빌드 폴더로 옮겨집니다.
• 디버깅 재연결:
  • 이제 다시 앱을 실행하여 이미지가 제대로 표시되는지 확인합니다.

 

결론

플러터에서 어셋 이미지를 추가하고 화면에 표시하는 과정에서 발생하는 문제는 주로 프로젝트의 의존성 관련 이슈 때문입니다. Pub get을 실행하여 프로젝트를 최신 상태로 유지하면 이러한 문제를 쉽게 해결할 수 있습니다.