Transform class
자식 위젯을 그리기 전에 변형을 적용하는 위젯입니다.
레이아웃에 앞서 회전을 적용하는 RotatedBox 와 달리, 이 객체는 페인팅 바로 전에 변환을 적용합니다. 즉, 이 위젯의 자식(따라서 이 위젯)이 얼마나 많은 공간을 차지하는지 계산할 때 변환은 고려되지 않습니다.
공식 문서 코드
Transform. 이 위젯은 가히 최고다. 영상을 보았다면 이 말에 동의할 것이다. 물론 이 글에서 저렇게 하는 건 다루지 않을 거다.
간단하게 키우고 돌리는 정도만 알아볼 것이다
하위 속성
| 속성명 | 타입 | 기본값 | 설명 |
| child | Widget | – | 변환 효과가 적용될 자식 위젯 |
| transform | Matrix4 | 필수 | 적용할 변환 행렬 (회전, 확대, 이동 등) |
| origin | Offset? | null | 변환을 적용할 기준 좌표 (좌상단 기준 상대 위치) |
| alignment | AlignmentGeometry? | null | 기준점을 위젯의 크기를 기반으로 정렬할 때 사용 |
| transformHitTests | bool | true | 히트 테스트 시 변환된 영역을 기준으로 할지 여부 |
| filterQuality | FilterQuality? | null | Bitmap으로 렌더링 시 품질을 설정 (스케일 시 유용) |
Transform 위젯은 생성자가 메인인 위젯이지만 기본도 충분히 메인이다. 예제 코드를 봐보자.
Transform(
alignment: Alignment.topRight,
transform: Matrix4.skewY(0.3)..rotateZ(-math.pi / 12.0),
child: Container(
padding: const EdgeInsets.all(8.0),
color: const Color(0xFFE8581C),
child: const Text('Apartment for rent!'),
),
),
우리가 이 코드에서 봐야 할 것은 transform 이라는 하위 속성이다. Transform 은 이 속성으로 변환을 하는데 Matrix4 를 사용해서 변환시킨다. Matrix4의 함수는 너무나 많기 때문에 간단하게 여기 나온 것만 설명하자면 Matrix4.skewY(0.3) 으로 y 축 기울기를 주는 거다. 그 후 cascade 연산자를 사용해서 ..rotateZ(-math.pi / 12.0) 이렇게 하여 z 축 회전을 추가해주는 거다. 그냥 이건 ~이렇게 위젯을 회전시킬 수 있구나~ 정도로만 알고 있으면 된다. 본론은 지금부터다.
Transform 에는 총 5개의 생성자가 존재한다. (기본까지 합쳐서)
우리가 방금 봤던 건 모든 변환을 가능하게 해주는 Transform 의 기본 형태라고 생각하면 된다.
그렇다면 유추할 수 있을 것이다. Transform 의 생성자는 기능을 때서 그것만 사용할 수 있게 만들어주는 것이란 것을.
생성자
| 생성자 | 설명 |
| Transform | 가장 일반적인 생성자. Matrix4를 직접 입력하여 모든 변환을 자유롭게 설정 |
| Transform.rotate | 특정 각도만큼 회전하는 변환을 간편하게 적용 |
| Transform.translate | 특정 거리만큼 이동하는 변환을 적용 |
| Transform.scale | 위젯을 확대/축소 |
| Transform.flip | 수평 또는 수직으로 뒤집기 (거울처럼 반전) |
하나씩 알아보자.
1. 기본 생성자 Transform
Transform(
alignment: Alignment.center,
transform: Matrix4.rotationZ(0.1),
child: Text('회전 + 커스텀 변환'),
)직접 Matrix4를 작성해서 회전, 이동, 스케일, 기울이기 등 조합 가능하다.
2. Transform.rotate
Transform.rotate(
angle: math.pi / 4, // 45도 회전
child: Icon(Icons.refresh),
)위젯을 회전시키는 가장 간단한 방법이다. 사용하는 방법은 간단한데 angle 에 자신이 회전을 원하는 값을 넣어주면 그에 따라 회전이 된다. 보통은 90도 단위로 위젯을 회전 시키는 일이 많기 때문에 pi / 4 이런 식으로 해서 원하는 회전을 넣어 줄 수 있다.
3. Transform.translate
Transform.translate(
offset: Offset(20, 10), // x: 오른쪽, y: 아래로 이동
child: Icon(Icons.arrow_forward),
)위젯을 지정한 위치로 이동시킬 수 있다. 이 위젯은 기본적으로 위치가 고정되어 있는 위젯에 쓸 수도 있다. 예를 들어서 FAB 의 위치가 마음에 안 들면 이걸 사용하여 강제로 위치를 이동시킬 수 있다. 단! 이거 적용이 좀 이상(?) 하게 되는 경우도 종종 있다. 위치는 잘 옮겨졌는데 클릭 기능이 갑자기 사라진다 든 지.. 그런 것들 이건 정말 유용하지만 조심해서 사용하길 권유한다.
4. Transform.scale
Transform.scale(
scale: 1.5, // 1.0 = 원래 크기, 1.5 = 150%
child: Icon(Icons.zoom_in),
)위젯을 확대 또는 축소시킬 수 있다. 이것 또한 정말 많이 사용하는데 모든 위젯에 먹기 때문에 만약에 Switch 를 사용했는데 크기가 작다? 이걸로 감싸고 scale 을 조절하면 크기를 얼마든지 키울 수 있다. scale 은 1 == 100%, 2 == 200% 라고 생각하면 된다.
5. Transform.flip
Transform.flip(
flipX: true, // 좌우 반전
child: Text('뒤집힌 텍스트'),
)
이것으로 위젯을 좌우 또는 상하로 뒤집기 할 수 있다. 이것 또한 영상에서 나오는데 응용을 잘한다면 정말 멋진 앱을 구성할 수 있을 것이다.
오늘은 간단하게 Transform 과 그 생성자들에 대해서 알아보았다. 평소에도 많이 사용하는 위젯이니 만큼 플러터에 입문한 지 얼마 되지 않은 사람도 사용해 보길 권장한다. 그럼 도움이 되었길 바라며 마치겠다.
