[Flutter] Transforms 형식

Transform.scale

Container보다 icon을 크게 만드는 상황이 간혹 있다.
단순히 icon의 size를 키우면 Container까지 같이 커지게 되는데
이럴 때는 Transform.scale을 사용하여 아이콘만 사이즈를 키우면 된다.

예시

Icon(
  Icons.euro_symbol_rounded,
  color: Colors.white,
  size: 88,
)

---

Transform.scale(
  scale: 2,
  child: const Icon(
    Icons.euro_symbol_rounded,
    color: Colors.white,
    size: 88,
  ),
)

• 위와 같이 Transform.scale을 사용하면 Container 영향 없이 icon의 크기 조절이 가능하다.

Transform.translate

이번에는 Container 영향 없이 위치 조절을 하고 싶다면
Transform.translate를 사용하면 위치 조절이 가능하다.

예시

Icon(
  Icons.euro_symbol_rounded,
  color: Colors.white,
  size: 88,
)

---

Transform.translate(
    offset: const Offset(8, 15),
    child: const Icon(
      Icons.euro_symbol_rounded,
      color: Colors.white,
      size: 88,
    ),
),

• Offset 속성을 사용하여 x축과 y축 기준으로 위치 조절이 가능하다.

하지만 Container를 사용 중이라면 icon이 Container를 벗어나게 되는데(overflow)
이럴 때는 clipBehavior를 사용하면 된다.

clipBehavior

Container(
   clipBehavior: Clip.hardEdge,
)

• 위와 같이 사용하면 Container를 넘어가는 모든 것을 잘라내게 된다.