AspectRatio 위젯

AspectRatio 위젯은 자식의 크기를 특정 종횡비(너비 대 높이의 비율)로 조정합니다.

속성

• aspectRatio: number - 너비 대 높이의 비율
• child: Widget - 종횡비에 따라 크기가 조정될 위젯

일반적인 종횡비

1. 16:9 (1.78:1)

   • 와이드스크린 비디오
   • 현대적인 디스플레이

   AspectRatio({
     aspectRatio: 1.78,
     child: VideoPlayer()
   })
   

2. 4:3 (1.33:1)

   • 전통적인 사진
   • 구형 디스플레이

   AspectRatio({
     aspectRatio: 1.33,
     child: Image()
   })
   

3. 1:1 (1:1)

   • 정사각형 이미지
   • 프로필 사진

   AspectRatio({
     aspectRatio: 1,
     child: ProfileImage()
   })
   

사용 사례

1. 반응형 비디오 플레이어:

   Container({
     width: "100%",
     child: AspectRatio({
       aspectRatio: 1.78,
       child: VideoPlayer()
     })
   })
   

2. 이미지 갤러리:

   GridView({
     children: images.map(image =>
       AspectRatio({
         aspectRatio: 1,
         child: Image(image)
       })
     )
   })
   

3. 미디어가 포함된 카드:

   Column({
     children: [
       AspectRatio({
         aspectRatio: 1.78,
         child: HeaderImage()
       }),
       CardContent()
     ]
   })
   

모범 사례

1. 반응형 디자인:

   • 일관된 레이아웃을 위해 AspectRatio 사용
   • 다양한 화면 크기 고려
   • 다양한 부모 제약 조건에서 테스트

2. 콘텐츠 맞춤:

   • 콘텐츠 유형에 맞는 종횡비 사용
   • 콘텐츠 잘림 고려
   • 오버플로우 적절히 처리

3. 성능:

   • 불필요한 중첩 피하기
   • 가능한 경우 const 위젯 사용
   • 리스트의 경우 캐싱 고려

일반적인 패턴

1. 미디어 플레이어:

   • 비디오 플레이어
   • 이미지 갤러리
   • 슬라이드쇼

2. 카드와 타일:

   • 상품 카드
   • 뉴스 기사
   • 사진 갤러리

3. 프로필 사진:

   • 사용자 아바타
   • 팀원 사진
   • 연락처 이미지

팁과 트릭

1. 동적 비율:

   • 콘텐츠 기반으로 비율 계산
   • 방향 변경 고려
   • 엣지 케이스 처리

2. 콘텐츠 크기 조정:

   • 이미지에 적절한 맞춤 모드 사용
   • 다양한 콘텐츠 크기 처리
   • 플레이스홀더 콘텐츠 고려

3. 레이아웃 통합:

   • 다른 레이아웃 위젯과 조합
   • 부모 제약 조건 처리
   • 오버플로우 케이스 고려