[flutter] AspectRatio에 대한 기본 사용법 익히기
Flutter에서 UI를 디자인할 때 이미지나 비디오의 가로 세로 비율을 유지하면서 화면에 적절하게 표시하고 싶은 경우에 AspectRatio 위젯을 사용할 수 있습니다. 이 위젯을 사용하면 부모 위젯의 크기에 따라 자식 위젯의 크기가 조정되며, 가로 세로 비율을 유지할 수 있습니다.
AspectRatio 위젯의 기본 사용법
AspectRatio 위젯은 다음과 같은 방법으로 사용할 수 있습니다:
AspectRatio(
aspectRatio: 16/9, // 가로 세로 비율 설정
child: Image.network('https://example.com/image.jpg'), // 자식 위젯으로 이미지 사용 예
)
위의 예제에서 aspectRatio 속성은 가로 세로 비율을 나타내며, 16:9 비율을 설정한 것입니다. Image.network 위젯은 AspectRatio 위젯의 자식 위젯으로 사용되었으며, 해당 가로 세로 비율을 유지하며 화면에 표시됩니다.
실전 예시
다음은 가로 세로 비율을 유지하면서 화면에 이미지를 표시하는 간단한 예시입니다.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('AspectRatio 예제'),
),
body: Center(
child: AspectRatio(
aspectRatio: 16/9,
child: Image.network('https://example.com/image.jpg'),
),
),
),
);
}
}
위의 예시에서 AspectRatio 위젯을 사용하여 16:9 비율의 이미지를 화면에 표시하고 있습니다.
요약
AspectRatio 위젯은 부모 위젯과의 가로 세로 비율을 유지하면서 자식 위젯을 화면에 표시할 수 있도록 도와주는 유용한 위젯입니다. 이를 사용하여 이미지나 비디오 등의 미디어를 화면에 적절하게 표시할 수 있습니다.