2일차의 내용은 5일차에도 쓰일 것이라 나중에 작성하려고 한다
AssetBundle의 종류에 대해서 먼저 Check!
하위 항목에 대한 기본 자신 번들을 결정하는 위젯!
(명시적으로 지정하지 않은 경우 AssetImages에 사용할 변들을 결장하기 위해 Image에서 사용됌)
example)
DefaultAssetBundle.of를 사용하여 AssetBundle을 가정하면
이제 TestAssetBundle의 "Hello world!"가 표시되옵나이다 (리소스 / 테스트를 요청할 때)
어플리케이션에서 사용하는 리소스 모임
assetbundle들은 어플리케이션에서 사용할 수 있는 이미지 및 문자열과 같은 리소스를 포함 => 리소스에 대한 어플리케이션의 사용자 인터페이스를 차단하지 않고 네트워크(NetworkAssetBundle) 또는 로컬 파일 시스템에서 투명하게 로드할 수 있음.
어플리케이션 프로그램에는 빌드될 때 응용 프로그램과 함께 패키지된 리소스가 포함된 rootBundle이 있음 / 어플리케이션의 루트번들에 리소스를 추가하려면 어플리케이션의 pubspect.yaml에서 asset 추가
네트워크를 통해 리소스를 로드하는 assetBundle
asset bundle은 리소스를 캐시하진 않지만 기본네트워크 stack은 자체적으로 일정 수준의 캐시를 구현할 수 있음
var baseUrl = Uri(
scheme: 'https',
host: 'dart.dev',
path: '/guides/libraries/library-tour',
fragment: 'numbers');
NetworkAssetBundle(Uri baseUrl)
```dart
// 공식 문서의 예제
import 'dart:convert';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class MyBundle extends StatelessWidget {
const MyBundle({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return DefaultAssetBundle(
bundle: TestAssetBundle(),
child: const Text("hello World"),
);
}
}
class TestAssetBundle extends CachingAssetBundle {
Future<ByteData> load(String key) async {
if (key == 'resources/test') {
return ByteData.view(
Uint8List.fromList(utf8.encode('Hello World!')).buffer);
}
return ByteData(0);
}
}
Image 자체 위젯에는 Image , Image.network, Image.assets, Image.file, Image.memory 등이 있다.
NetworkImages, AssetsImages 등도 있다
flutter:
assets:
- images/cat.png
assets:
- packages/fancy_backgrounds/backgrounds/background1.png
Center(
child: Column(
children: [
const Image(
image: NetworkImage(
'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
),
Image.network(
'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
Image.asset('icons/heart.png', package: 'my_icons')
],
),
);
그 외에 RawImage / ImageProvider 등도 있으니.. 한번 정도는 읽어볼만 한 거 같다. (잘 안쓸 거 같지만..)
다들 알만한 부분이라 따로 자세히 적진 않는다.
IconButton, Icons, IconsThenme, ImageIcon 등 여러가지로 쓰임
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: const <Widget>[
Icon(
Icons.favorite,
color: Colors.pink,
size: 24.0,
semanticLabel: 'Text to announce in accessibility modes',
),
Icon(
Icons.audiotrack,
color: Colors.green,
size: 30.0,
),
Icon(
Icons.beach_access,
color: Colors.blue,
size: 36.0,
),
],
),
// const IconTheme(
//{Key? key,
//required IconThemeData data,
//required Widget child}
//)
// 위와 같은 방식으로 쓰인다