Flutter Assets와 image추가하기

FrameCreator

7 min readFeb 24, 2021

플루터 공식문서의 중요성은 여러 번 강조해도 지나치지 않다. 플루터 개발자라면 공식문서의 어느 페이지에 어느 내용이 있는지 훤히 알고 있어야 한다.

플루터 공식문서의 Assets와 image 추가하기 내용을 정리해 보았다.

Assets와 Image 추가하기

asset 플루터앱은 코드와 에셋(asset 또는 resources)으로 구성됨

asset의 종류

static data (예 JSON files)
configuration files
icons
images (JPEG, WebP, GIF, animated WebP/GIF, PNG, BMP, and WBMP)
Assets 지정 pubspec.yaml을 사용하여 지정함. pubspec.yaml 파일에 있는 명시적 경로 (파일에 상대적인 경로)로 지정됨. assets의 선언 순서는 문제되지 않음.

.../pubspec.yaml
  .../graphics/my_icon.png
  .../graphics/background.png
  .../graphics/dark/background.png
  ...etc.

디렉토리 아래에 모든 assets을 포함하려면 /과 디렉토리 이름을 표시함.

flutter:
 assets:
   - assets/

직접 디렉토리에 위치한 assets만 포함되어 하위디렉토리인 경우 각 하위디렉토리를 추가 지정해야 함.
Asset 번들과 Asset 변형 Asset은 Asset Bundle이라는 특수 아카이브에 배치됨. 이 번들은 런타임시 읽을 수 있음. 빌드 프로세스는 자산 변형이라는 개념을 지원합니다. pubspec.yaml에 assets 경로가 지정되면 빌드 프로세스는 인접한 하위 디렉토리에서 이름이 같은 파일을 찾습니다. 그런 다음 이러한 파일은 지정된 자산과 함께 자산 번들에 포함됩니다.

예를 들어서 응용 프로그램 디렉토리에 다음 파일이있는 경우

.../pubspec.yaml
  .../graphics/my_icon.png
  .../graphics/background.png
  .../graphics/dark/background.png
  ...etc.

pubspec.yaml 파일에 다음 내용이 있는 경우

flutter:
  assets:
    - graphics/background.png

graphics/background.png 와 graphics/dark/background.png 모두 asset bundle에 포함됨. 전자는 main asset 후자는 variant 즉 asset 변형으로 간주됨.

반면에 아래와 같이 graphics directory가 지정된 경우에는

flutter:
  assets:
    - graphics/

graphics/my_icon.png, graphics/background.png ,graphics/dark/background.png파일들이 모두 포함됨. 해상도에 적합한 이미지를 선택할 때 asset 변형을 사용함.

Asset 로드

[AssetBundle]객체를 통해 asset에 엑세스할 수 있음. text asset(loadString()) 과 이미지 asset (load()) 모두 로드 가능하고pubspec.yaml 파일에 경로가 지정되어야 함.

text assets

package:flutter/services.dart로부터 rootBundle 객체를 사용하여 text assets를 로드할 수 있음.

current BuildContext로부터는 DefaultAssetBundle.of()을 사용하는 게 권장되고 DefaultAssetBundle.of()은 예를 들어 JSON file과 같은 경우 우회적으로 로드할 때 사용가능함.

rootBundle을 사용하면 직접 assets를 로드할 수 있음.

사례 available, you can use rootBundle을 사용하면 직접 assets를 로드할 수 있음.

import 'dart:async' show Future;
import 'package:flutter/services.dart' show rootBundle;Future<String> loadAsset() async {
  return await rootBundle.loadString('assets/config.json');
}

이미지 로딩

해상도에 따르는 이미지 선언

현재 장치 픽셀 비율에 적합한 해상도의 이미지 로드 가능함.

AssetImage 은 asset을 현재 장치 픽셀 비율과 가장 일치하는 asset에 매핑함. 이 매핑이 작동하려면 특정 디렉토리 구조에 따라 asset을 정렬해야 함.

.../image.png
  .../Mx/image.png
  .../Nx/image.png
  ...etc.

M 과 N 은 포함된 이미지의 해상도에 해당하는 숫자임. 즉, 이미지가 지향하는장치 픽셀 비율을 지정함.

주요 asset은 1.0의 해상도에 해당하는 것으로 가정함. 아래 사례에서 주요 asset은 my_icon.png임.

.../my_icon.png
  .../2.0x/my_icon.png
  .../3.0x/my_icon.png

장치 픽셀 비율이 1.8 인 장치에서는.../2.0x/my_icon.png 이 채택됨. 장치 픽셀 비율이 2.7 인 경우 자산.../3.0x/my_icon.png이 채택됨.

렌더링 된 이미지의 너비와 높이가 Image 위젯에 지정되지 않은 경우 공칭 해상도는 기본 자산과 동일한 화면 공간을 차지하도록 더 높은 해상도로 자산의 크기를 조정하는 데 사용됨. 즉, 72 x 72가 .../my_icon.png 72 x 72 픽셀 인 경우 .../3.0x/my_icon.png의 경우 216 x 216 픽셀이어야 함. 그러나 너비와 높이를 지정하지 않으면 둘 다 72x72 픽셀로 렌더링됨.

이미지 로딩 이미지를 로드하려면 AssetImage 위젯의 build 메소드에서 클래스를 사용.

예를 들어 아래와 같은 코드에서 배경 이미지를 로드 할 수 있음.

Widget build(BuildContext context) {
  return Image(image: AssetImage('graphics/background.png'));
}

default asset 번들을 사용하는 모든 것은 이미지를 로드할 때 해상도 인식을 상속합니다. 하위 클래스인 ImageStream,ImageCache와 같은 클래스를 사용할 때도 상속함.

packages에서 이미지

[package]dependency에서 이미지를 로드하려면 package도 AssetImage에 같이 표시해주어야 함.

예를 들어 my_icons package에서 이미지를 로드하는 경우

.../pubspec.yaml
  .../icons/heart.png
  .../icons/1.5x/heart.png
  .../icons/2.0x/heart.png
  ...etc.AssetImage('icons/heart.png', package: 'my_icons')

와 같이 패키지도 같이 표시해주어야 한다.

package assets 번들링

package에서 사용되는 assets의 경우 pubspec.yaml에서 지정되어야 함.

fancy_backgrounds 패키지가 다음의 파일들을 갖는 경우

.../lib/backgrounds/background1.png
  .../lib/backgrounds/background2.png
  .../lib/backgrounds/background3.png

pubspec.yaml 에서 다음과 같이 지정해주어야 한다.

flutter:
  assets:
    - packages/fancy_backgrounds/backgrounds/background1.png

Flutter Assets와 image추가하기

Written by FrameCreator

No responses yet