[flutter] AspectRatio의 다른 위젯과의 조합 예시 살펴보기

Flutter에서 화면 배율 조정을 위해 AspectRatio 위젯을 사용할 수 있습니다. AspectRatio 위젯은 자식 위젯의 가로 및 세로 비율을 유지하면서 자식 위젯을 확장 또는 축소하는 데 사용됩니다.

이제 AspectRatio 위젯과 다른 위젯들을 어떻게 조합하여 화면 디자인을 만들 수 있는지 알아보겠습니다.

1. AspectRatio와 이미지 위젯

AspectRatio(
  aspectRatio: 16/9,
  child: Image.network('https://example.com/image.jpg', fit: BoxFit.cover),
)

이 예제에서는 AspectRatio 위젯과 이미지 위젯을 조합하여 가로 세로 비율을 지정한 이미지를 화면에 보여주고 있습니다.

2. AspectRatio와 컨테이너 위젯

AspectRatio(
  aspectRatio: 3/2,
  child: Container(
    color: Colors.blue,
  ),
)

이 예제에서는 AspectRatio 위젯과 컨테이너 위젯을 조합하여 특정한 가로 세로 비율을 갖는 색상이 채워진 영역을 만들고 있습니다.

3. AspectRatio와 텍스트 위젯

AspectRatio(
  aspectRatio: 1,
  child: Center(
    child: Text(
      'Aspect Ratio Example',
      style: TextStyle(fontSize: 20),
    ),
  ),
)

위 예제에서는 특정한 가로 세로 비율을 갖는 공간 안에 텍스트를 중앙 정렬하여 표시하고 있습니다.

AspectRation 위젯은 다른 위젯과 조합하여 다양한 화면 디자인을 만들 수 있습니다. 다양한 상황에 맞게 이를 활용하여 화면을 균형있게 표현하는데 도움이 될 것입니다.

더 많은 예제와 정보는 Flutter 공식 문서에서 확인할 수 있습니다.