[flutter] 로컬, 네트워크 이미지 사용하는 방법

플러터에서 로컬, 네트워크 이미지 사용하는 방법

우리는 앱에 적절한 이미지를 추가하여 사용자가 앱을 이해하기 쉽게 유도하거나, 앱의 분위기와 느낌(?)을 만들 수 있습니다. 이때 사용되는 이미지는 주로 로컬 저장소나 서버 요청으로 불러오는데요.

 

플러터에서는 Image() 위젯을 이용하면 간단하게 처리할 수 있습니다. 그럼 어떻게 이미지를 불러와서 화면에 나타내는지 알아보도록 하겠습니다.

 

로컬 이미지

우선 로컬에 저장된 이미지를 불러오려면 실제로 저장된 이미지가 있어야겠죠?

 

프로젝트의 최상위 위치에 assets 폴더를 생성합니다. 참고로 폴더 이름은 자유롭게 사용하시면 됩니다. 그리고 해당 폴더에 우리가 사용할 이미지를 추가합니다.

 

위젯에서 로컬 이미지를 표시하기 위해서는 pubspec.yaml 파일에 사용하려는 폴더나 이미지 파일을 추가해야 합니다. pubspec.yaml 파일에서 아래와 같은 부분을 찾습니다.

 

이미지 파일을 사용하기 위해 다음과 같이 주석을 풀어주고, assets 폴더를 지정합니다. 위에 예시처럼 이미지를 하나씩 작성해도 되지만 매번 추가하기 번거롭기 때문에 저는 폴더 경로를 입력했습니다.

 

이제 로컬 이미지를 불러올 준비가 끝났습니다. 다음과 같이 Image() 위젯을 사용하면 로컬 이미지를 화면에 표시할 수 있습니다. 또 위젯의 옵션을 추가하면 이미지의 크기와 맞춤 여부를 변경할 수 있습니다.

// 방법 1
Image(
  image: AssetImage('assets/sample.png'),
  width: 100,
  height: 100,
  fit: BoxFit.fill,
),

// 방법 2
Image.asset(
  'assets/sample.png',
  width: 100,
  height: 100,
  fit: BoxFit.fill,
),

 

네트워크 이미지

이번에는 서버에 있는 이미지를 불러와서 화면에 나타내는 방법에 대해 알아보겠습니다. 네트워크 이미지를 표시하기 위해서는 NetworkImage() 위젯을 사용합니다.

// 방법 1
Image(
  image: NetworkImage(
    'https://...', // 이미지가 저장된 서버 주소
  ),
  width: 100,
  height: 100,
  fit: BoxFit.fill,
),

// 방법 2
Image.network(
  'https://...', // 이미지가 저장된 서버 주소
  width: 100,
  height: 100,
  fit: BoxFit.fill,
),

 

플러터에서 로컬, 네트워크 이미지를 불러오는 방법에 대해 알아봤는데요. 이 글이 앱을 만드시는데 조금이나마 도움이 되었으면 좋겠습니다. 감사합니다 😊