Image
네트워크에 있는 이미지 표시하기
Image.network('http://bit.ly/2Pvz4t8')
Asset 이미지 호출하기
Image.asset('assets/sample.jpg')
pubspec.yaml
flutter:
assets:
- assets/
💬 flutter packages get
💬 이미지를 asset에 추가하고 핫 리로드 시 적용이 되지 않으며, 프로젝트를 종료 후 다시 빌드를 해야 한다.
이미지 Box.fit
// 원본. 가로세로 비율 변화 없음
Image.asset('images/flutter.png', fit: BoxFit.contain),
// 지정한 영역을 꽉 채우며, 비율이 변경된다.
Image.asset('images/flutter.png', fit: BoxFit.fill),
// 너비에 맞게 확대 또는 축소.
Image.asset('images/flutter.png', fit: BoxFit.fitWidth),
// 높이에 맞게 확대 또는 축소.
Image.asset('images/flutter.png', fit: BoxFit.fitHeight),
// 지정한 영역을 꽉 채우며, 비율이 유지된다.
Image.asset('images/flutter.png', fit: BoxFit.cover),
// 원본 크기를 유지한다. 원본으로부터 해당 영역 크기만큼 가운데를 출력한다.
Image.asset('images/flutter.png', fit: BoxFit.none),
Image Container
image_container.dart
import 'package:flutter/material.dart';
class ImageContainer extends StatelessWidget {
final double borderRadius;
final String imageUrl;
final double width;
final double height;
const ImageContainer({
Key? key,
required this.borderRadius,
required this.imageUrl,
required this.width,
required this.height,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return ClipRRect(
borderRadius: BorderRadius.circular(borderRadius),
child: Image.network(
imageUrl,
width: width,
height: height,
fit: BoxFit.cover,
),
);
}
}
main.dart
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: ImageContainer(
width: 200,
height: 200,
borderRadius: 10,
imageUrl: 'https://placeimg.com/200/120/tech/grayscale',
),
);
}
}
CircleAvatar
CircleAvatar(
child: Icon(Icons.person),
),
◻️ child 프로퍼티에 정의한 위젯을 원형으로 만든다.
💬 네트워크상에 존재하는 이미지를 표시한다면 child 프로퍼티가 아닌 backgroundImage 프로퍼티에 NetworkImage 클래스의 인스턴스를 지정해야 네트워크에서 받아온 이미지가 원형으로 표시된다.
CircleAvatar(
backgroundImage: NetworkImage([이미지 URL]),
),
'Flutter > Concept' 카테고리의 다른 글
[ Flutter ] 텍스트 (0) | 2022.02.27 |
---|---|
[ Flutter ] 플랫폼 대응 (0) | 2022.02.24 |
[ Flutter ] BottomNavigationBar (0) | 2022.02.19 |
[ Flutter ] HTTP 통신 (0) | 2022.01.28 |
[ Flutter ] Web 배포 using GitHub (0) | 2022.01.07 |