[flutter] Container 회전시키기 (Transform.rotate)

Flutter는 위젯 기반의 UI 구성 프레임워크로, 다양한 애니메이션과 효과를 손쉽게 구현할 수 있습니다. 그 중, Container 위젯을 회전시키는 것은 많은 상황에서 유용하게 사용될 수 있습니다. 이번 글에서는 Flutter의 Transform.rotate을 활용해 Container 위젯을 회전시키는 방법에 대해 알아보겠습니다.

 

 

문제발생

플러터로 AR을 만들면서 카메라가 회전이 안되는 문제가 발생했습니다. "그렇다면 카메라외의 아이콘들을 가로로 회전시켜버리면 어떨까?"하는 생각이 문득 들었습니다. 그래서 Container를 회전시키기로 했습니다.

 

필요한 패키지 임포트하기

Container 위젯을 회전시키기 위해 필요한 수학 연산을 위해 dart:math 패키지를 임포트합니다.

import 'dart:math' as math;

 

회전 각도 계산하기

회전하고자 하는 각도를 라디안 값으로 변환해야 합니다. 예제에서는 90도를 회전시키고자 합니다.

double degrees = 90;
double radians = degrees * math.pi / 180;

 

Transform.rotate를 활용한 회전

`Transform.rotate`를 사용하여 원하는 각도만큼 위젯을 회전시킬 수 있습니다. 위에서 계산한 라디안 값을 angle 속성에 전달하면 됩니다.

return Scaffold(
    body: Center(
        child: Transform.rotate(
            angle: radians,
            child: Container(
                width: 100,
                height: 100,
                // 다른 속성 및 자식 위젯들
                ...
                ...
            )
        )
    )
)

 

결론

Flutter에서 Container와 같은 위젯을 회전시키는 것은 간단합니다. `Transform.rotate` 위젯을 활용하면 원하는 각도로 위젯을 회전시킬 수 있으며, 이를 통해 다양한 UI 효과와 애니메이션을 구현할 수 있습니다. 이 기능을 활용하여 사용자에게 독특하고 흥미로운 경험을 제공할 수 있습니다.