flutter.dev

[하는 중.]어셋과 이미지 추가하기

paulaner80 2019. 11. 26. 11:41
반응형

어셋과 이미지 추가하기

 

플러터앱은 코드와 어셋(리소스)을 가지고 있습니다. 번들로 앱에 들어가 있는 어셋은 실행 할 때 접근할 수 있습니다. 보통 어셋의 형식은 정적 데이터, 구성파일, 아이콘, 이미지 등 입니다.

 

어셋 명세하기

앱에서 사용할 어셋들은 pubspec.yaml 기술합니다.

 

디렉토리의 모든 어셋들을 포함시키려면 디렉토리이름/”으로 써 주면 됩니다.

 

어셋번들링

flutterasset섹션에 명시되어 있는 어셋들은 앱에 포함됩니다.

다른 컨텍스트에서

예를 들어

 

 

 

어셋 로딩

AssetBundle 객체를 사용해 앱의 어셋에 접근할 수 있습니다.

loadString() string/test 어셋을 가져올 때 사용합니다.

load()image/binary 어셋을 가져올 때 사용합니다.

Logical key를 넘겨야합니다. Logical keypubspec.yaml에 명시되어 있는 어셋의 경로에 대응됩니다.

 

텍스트 어셋 불러오기

메인 어셋 번들에 쉽게 접근할 수 있도록 해주는 rootBundle 오브젝트가 있습니다.

package:flutter/services.dart에 있는 rootBundle 전역 정적(global static)을 사용해 어셋을 로드할 수 있습니다. 그러나 DefaultAssetBundle 위젯을 사용해 현재의 빌드컨텍스트에 대한 AssetBundle를 얻는 것을 추천합니다. 이런 방식은 상위위젯이 다른 어셋번들을 대체할 수 있도록하여 테스트 시나리오에 유용할 수 있습니다.

 

DefaultAssetBundle.of()을 사용하여 어셋을 간접적으로 로드 합니다.

 

위젯 컨텍스트 외부나 AssetBundle을 사용할 수 없는 경우 rootBundle을 사용하여 어셋들을 직접로드 할 수 있습니다.

 

 

이미지 불러오기

플러터는 디바이스의 해상도에 적합한 이미지를 로드 할 수 있습니다.

 

해상도 인식 이미지 어셋 선언하기

AssetImage는 어셋 요청에 대해 핸재 디바이스의 픽셀비율과 가장 일치하는 어셋을 찾습니다.

이렇게 하기위해서는 특정 디렉토리 구조에 따라야합니다.

NMNumber형식의 식별자 입니다. 이미지가 포함되어야 할 해상도입니다.

.../image.png

  .../Mx/image.png

  .../Nx/image.png

...etc.

 

메인 어셋은 1.0해상도라고 가정합니다. 예를들어 my_icon.png 이미지에 대한 어셋 레이아웃을 생각해보세요.

디바이스 픽셀 비율이 1.8인 경우는 /2.0x/


 AssetImage('icons/heart.png', package: 'my_icons')




패키지 어셋 번들링

*. lib 폴더에 있는 어셋들(ex. .../lib/backgrounds/background1.png)

packages/fancy_backgrounds/backgrounds/background1.png 과 같이 써야 한다는 내용 같음.

원하는 어셋들이 패키지의 pubspec.yaml 파일에 들어가 있으면, 앱과 같이 번들링 됩니다. 특히 패키지에서 사용하는 어셋들은 반드시 pubspec.yaml 파일안에 들어가 있어야 합니다.

 

패키지는 pubspec.yaml에 지정되지 않아도 /lib 폴더에 있는 어셋들을 선택할 수 있습니다. 이 경우 이미지들을 번들링하기 위해서는 앱에서 어떤 것이 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

 

기본 플랫폼과 자산 공유

플러터 어셋들은 안드로이드의 AssetManagerIOSNSBunlde을 통해 플랫폼 코드에 쉽게 사용할 수 있습니다.

 

안드로이드

안드로이드에서 어셋들은 AssetManager API를 통해 사용할 수 있습니다. 예를 들어 openFD를 보면, openFD에서 사용되는 조회키(lookup key) ..

 



 

노잼이네..

 

 

https://flutter.dev/docs/development/ui/assets-and-images


'flutter.dev' 카테고리의 다른 글

Hive  (0) 2021.05.25
permission_handler 사용법  (0) 2021.04.12
Provider  (0) 2019.11.05
리스트 기본  (0) 2019.05.03
스크린에 데이터 전달하기  (0) 2019.05.02