12. [Flutter] 위젯 위치 이동시키기(with Transform)

위젯 위치를 이동시키고 싶다면 Transform 위젯을 사용하시면됩니다.

---

 

1. Transform.rotate: 지정한 각도만큼 위젯을 회전합니다.
2. Transform.translate: 지정한 값만큼 x, y, z 축으로 위젯을 이동합니다.
3. Transform.scale: 지정한 배율로 위젯을 확대 또는 축소합니다.
4. Transform.skew: 지정한 각도만큼 x, y 축으로 위젯을 비틀어 놓습니다.
5. Transform.matrix: 직접 변환 행렬을 지정하여 위젯을 변환합니다.

---

아래 함수들은 모두 Transform 위젯의 생성자에 옵션으로 전달되며, 필요에 따라 조합하여 사용할 수 있습니다. 각 함수들의 자세한 사용 방법과 예제는 다음과 같습니다.

 

// Transform.rotate 함수 사용 예제
Transform.rotate(
  angle: math.pi / 4, // 45도 회전
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
)

// Transform.translate 함수 사용 예제
Transform.translate(
  offset: Offset(50.0, 100.0), // x축으로 50, y축으로 100만큼 이동
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
)

// Transform.scale 함수 사용 예제
Transform.scale(
  scale: 1.5, // 1.5배 확대
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
)

// Transform.skew 함수 사용 예제
Transform.skew(
  xAxis: 0.2, // x축으로 20도 비틀기
  yAxis: 0.3, // y축으로 30도 비틀기
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
)

// Transform.matrix 함수 사용 예제
Transform.matrix(
  Matrix4.skewX(0.2), // x축으로 20도 비틀기
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
)

---

실전 사용.

Transform.translate 를 사용하여 Text 위젯 윗쪽으로 이동

사용된 소스

 Transform.translate(
 	offset: const Offset(0, -150),
    child: const Text(
        '1st Complete',
    	     style: TextStyle(
        	 fontWeight: FontWeight.bold, fontSize: 15),
    	),
  )