Transform,clipBehavior - 아이콘의 위치,크기,박스에서 벗어나지않게 하기

Transform.scale

- 크기를 설정할 수 있다.

- scale를 사용하면 부모 위젯보다 더 크게 설정이 가능

Transform.translate

-  x,y값으로 위치를 조정

clipBehavior : Clip.hardEdge

- Contatiner안에 위의 아이콘이 들어가있다.

- 아이콘의 크기가 scale로 컨테이너의 크기보다 더 크게 보여지기 때문에 벗어나는 부분은 잘라줄 수 있다.

결과 화면

- 원래는 padding로 감싸져있기 때문에 Container도 같이 늘어나야하지만 transform을 사용해서 아이콘만 늘어났다.

---

카드 부분 코드

Container(
                //아이콘의 위치를 박스를 벗어나지 않게 해줌.
                clipBehavior: Clip.hardEdge,
                decoration: BoxDecoration(
                  color: const Color(0xff1F2123),
                  borderRadius: BorderRadius.circular(20),
                ),
                child: Padding(
                  padding: const EdgeInsets.all(30),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          const Text(
                            "Euro",
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 32,
                              fontWeight: FontWeight.w600,
                            ),
                          ),
                          const SizedBox(height: 10),
                          Row(
                            children: [
                              const Text(
                                "6 428",
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 20,
                                ),
                              ),
                              const SizedBox(width: 5),
                              Text(
                                "EUR",
                                style: TextStyle(
                                  color: Colors.white.withOpacity(0.8),
                                  fontSize: 20,
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                      //scale (아이콘의 크기):  Row안이지만 크기는 벗어날 수 있게 해줌.
                      Transform.scale(
                        scale: 2.2,
                        //translate (아이콘의 위치): 아이콘이 보여지는 위치를 바꿀 수있음
                        child: Transform.translate(
                          // x: -5, y: 10
                          offset: const Offset(-5, 10),
                          child: const Icon(
                            Icons.euro_rounded,
                            color: Colors.white,
                            size: 88,
                          ),
                        ),
                      )
                    ],
                  ),
                ),
              ),