어셋과 이미지 추가하기
플러터앱은 코드와 어셋(리소스)을 가지고 있습니다. 번들로 앱에 들어가 있는 어셋은 실행 할 때 접근할 수 있습니다. 보통 어셋의 형식은 정적 데이터, 구성파일, 아이콘, 이미지 등 입니다.
어셋 명세하기
앱에서 사용할 어셋들은 pubspec.yaml 기술합니다.
디렉토리의 모든 어셋들을 포함시키려면 “디렉토리이름/”으로 써 주면 됩니다.
어셋번들링
flutter의 asset섹션에 명시되어 있는 어셋들은 앱에 포함됩니다.
다른 컨텍스트에서
예를 들어
어셋 로딩
AssetBundle 객체를 사용해 앱의 어셋에 접근할 수 있습니다.
loadString()는 string/test 어셋을 가져올 때 사용합니다.
load()는 image/binary 어셋을 가져올 때 사용합니다.
Logical key를 넘겨야합니다. Logical key는 pubspec.yaml에 명시되어 있는 어셋의 경로에 대응됩니다.
텍스트 어셋 불러오기
메인 어셋 번들에 쉽게 접근할 수 있도록 해주는 rootBundle 오브젝트가 있습니다.
package:flutter/services.dart에 있는 rootBundle 전역 정적(global static)을 사용해 어셋을 로드할 수 있습니다. 그러나 DefaultAssetBundle 위젯을 사용해 현재의 빌드컨텍스트에 대한 AssetBundle를 얻는 것을 추천합니다. 이런 방식은 상위위젯이 다른 어셋번들을 대체할 수 있도록하여 테스트 시나리오에 유용할 수 있습니다.
DefaultAssetBundle.of()을 사용하여 어셋을 간접적으로 로드 합니다.
위젯 컨텍스트 외부나 AssetBundle을 사용할 수 없는 경우 rootBundle을 사용하여 어셋들을 직접로드 할 수 있습니다.
이미지 불러오기
플러터는 디바이스의 해상도에 적합한 이미지를 로드 할 수 있습니다.
해상도 인식 이미지 어셋 선언하기
AssetImage는 어셋 요청에 대해 핸재 디바이스의 픽셀비율과 가장 일치하는 어셋을 찾습니다.
이렇게 하기위해서는 특정 디렉토리 구조에 따라야합니다.
N과 M은 Number형식의 식별자 입니다. 이미지가 포함되어야 할 해상도입니다.
.../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
기본 플랫폼과 자산 공유
플러터 어셋들은 안드로이드의 AssetManager와 IOS의 NSBunlde을 통해 플랫폼 코드에 쉽게 사용할 수 있습니다.
안드로이드
안드로이드에서 어셋들은 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 |