Flutter 반응형 레이아웃

Hyunsoo Jung·2024년 11월 4일
0

Flutter

목록 보기
7/15

디바이스나 뷰포트 크기에 따라 유연하게 UI가 변경됨.


EdgeInsetsGeometry

  • Geomety의 하위 클래스 EdgeInsets.all(), EdgeInsets.only()
  • padding 속성의 값은 항상 EdgeInsetsGeometry 타입을 가진다.

Constraints

  • 위젯의 크기와 위치를 결정하는 규칙을 정의
  • 작동 방식
    • 부모 위젯이 자식 위젯에게 제약 조건을 전달
      ->크기, 위치 최종 결정
  • 주요 특징
    • 최소 및 최대 너비/높이를 지정할 수 있음
    • 위젯은 부모의 제약 조건을 위반할 수 없음
    • 제약 조건은 위젯 트리를 따라 위에서 아래로 전파
  • Constraint 제약조건
    • Constraints go down(제약 조건이 아래로 전달)
    • Sizes go up(크기 정보가 위로 전달)
    • Parent set position(부모가 위치를 결정)
    • ※ 느슨한 제약과 엄밀한 제약

MediaQuery.of(context)

  • 디바이스의 크기, 방향 정보 제공
  • Orientation.portrait: 세로 방향
  • Orientation.landscape: 가로 방향

SingleChildScrollView 위젯

  • 화면을 벗어날 때 스크롤 가능한 단일 위젯
  • 자식 위젯의 크기가 화면을 초과할 때 스크롤을 제공
  • 수직 또는 수평 스크롤을 지원
profile
안드로이드 네이티브 Kotlin과 크로스 플랫폼 Flutter를 잘 활용하면서 공익적 가치를 실현하는 앱 개발자

0개의 댓글