[Flutter] 박스 밖으로 넘치는 부분 숨겨주기

카드를 넘쳐 흐르는 요소를 넣고 카드 밖으로 넘쳐나는 것은 숨겨보도록 하자

html로 치면 overflow:hidden; 과 같은 효과이다.

(이런식으로 카드를 넘어가는 아이콘)

요소 크기 키우기

아이콘의 크기는 size 속성을 통해서 키울 수 있지만
이런식으로 키우면 아이콘을 감싸고있는 Container 사이즈가 같이 커진다.

카드 밖으로 넘쳐흐르게 하기 위해서는 Container의 크기는 유지한 채
아이콘의 크기만 커져야 하는데 이때 Transform.scale 속성을 사용한다.

// 크기 설정
Transform.scale(
  scale: 3,
  child: const Icon(
    Icons.euro_rounded,
    color: Colors.white,
    size: 88,
  ),
)

Transform.scale로 아이콘을 감싸주고 scale 속성을 설정해준다.

scale에는 아이콘의 크기를 몇배로 키울것인지 설정해주면 된다.

이때 아이콘의 size에 scale을 곱한 크기가 되는 것이므로
아이콘의 size 역시 설정 해주어야 한다.

위 코드에서 아이콘의 크기는 88*3 = 264 가 될 것이다.

(제대로 넘쳐나는중)

x,y 위치 조정해주기

맨 위 결과물 사진을 보면 아이콘이 카드에 중앙정렬 되어있지 않다.

아이콘을 좀 더 좌우, 상하로 조정하고 싶을 땐 Transform.translate 를 이용해준다.
(html로 치면 position: fixed 또는 absolute 와 비슷할듯)

사용방법은 간단하다.
요소를 Transform.translate 으로 감싸주고 offset 속성을 설정해주면 된다.

offset 에는 요소를 좌우(x)로 얼마나 옮길지, 상하(y)로 얼마나 옮길지 설정해주면 된다.

// 크기 설정
Transform.scale(  scale: 3,
  // 위치 설정
  child: Transform.translate(
    offset: const Offset(-5, 12),
    child: const Icon(
      Icons.euro_rounded,
      color: Colors.white,
      size: 88,
    ),
  ),
)

이렇게 하면 아이콘이 왼쪽으로 5만큼, 아래쪽으로 12만큼 이동한다.

카드 밖으로 넘치는 부분 숨겨주기

마지막으로 카드 밖으로 넘쳐나는 부분을 hidden 해 줄 차례

Container 안에 코드 한줄만 넣어주면 끝이다.

clipBehavior: Clip.hardEdge,

이렇게 하면 컨테이너 밖으로 넘쳐나는 애들은 사라진다.

다시 보는 결과물!

카드부분 전체코드

Container(
  // overflow hidden 처리
  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,
                  ),
                ),
              ],
            )
          ],
        ),
        // 아이콘 크기 조정
        Transform.scale(
          scale: 2.2,
          // 아이콘 위치 조정
          child: Transform.translate(
            offset: const Offset(-5, 12),
            child: const Icon(
              Icons.euro_rounded,
              color: Colors.white,
              size: 88,
            ),
          ),
        )
      ],
    ),
  ),
)

<참조>
[노마드코더] Flutter 강좌