Flutter 화면 방향 Orientation에 따라 레이아웃 변경 Landscape Portrait 뜻

세로, 가로 방향에 따라 레이아웃을 다르게 생성해야 할 때가 있다. 

각각의 위젯들을 모듈화 시키고 그 모듈을 방향이 바뀔때마다 레이아웃을 변경해주는 것이다. 

모바일은 레이아웃에 영향을 덜 받지만, 태블릿의 경우는 레이아웃을 다르게 적용해야 할 때가 많다. 

 

용어정리

먼저 용어를 정리하자면 

Orientation : 방향

Portrait : 세로 

Landscape : 가로 

사실 Orientation은 방향성을 Portrait는 초상화 Landscape는 풍경화를 뜻한다. 

Portrait - tall | Landscape - wide 

Orientation eunm에서 확인할 수 있다.  

적용방법

일단 편하게 하는 방법은 

OrientaionBuilder

을 사용하는 것이다. 

 

사용방법은 다른 빌더를 사용하는 것과 동일하다. 

OrientationBuilder(
  builder: (context, orientation) {
    if (orientation == Orientation.portrait) {
      // 세로일때
      return SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              "세로",
              style: TextStyle(
                fontSize: 200,
                color: Colors.blue,
              ),
            ),
          ],
        ),
      );
    } else {
      return Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text(
            "가로",
            style: TextStyle(
              fontSize: 500,
              color: Colors.red,
            ),
          ),
        ],
      );
    }
  },
),

 

결과

생각보다 너무 간단하고 

속도도 문제 없는것 같다. 일단 간단한걸 테스트해서 그런걸 수도 있지만, 빌더의 특성상 큰 속도저하는 없을 것 같다. 

 

다른 위젯들을 모듈화 해서 더 다양하게 테스트하고 핸드폰인지 태블릿인지 구별해서 다른값을 전달하는 것도 해야 할 것 같다.