Shadow Box

🎨 What I Designed

https://github.com/suojae/flutter_ui_lab/blob/main/lib/2025/01/29.dart

flutter_ui_lab/lib/2025/01/29.dart at main · suojae/flutter_ui_lab

---

🔎  How I Made It

사용된 주요 위젯: Container, BoxDecoration, BoxShadow

 

What is Container?

A container first surrounds the child with padding and then applies additional constraints to the padded extent 

컨테이너는 자식위젯을 padding으로 둘러싼다. 패딩이 없으면 자식위젯은 컨테이너랑 딱 붙게된다. 먄약 제약조건(constraint)을 설정하면 패딩을 포함한 영역에 제약이 들어간다.

 

During painting, the container first applies the given transform, then paints the decoration to fill the padded extent, then it paints the child, and finally paints the foregroundDecoration, also filling the padded extent.

컨테이터는 회전, 크기조정, 기울이기등의 "변환(Transform)"을 먼저 적용후 "장식(decoration)", 자식(child)", "전경(ForegroundDecoration)"을 그리는 순서로 진행된다.

 

Containers with no children try to be as big as possible unless the incoming constraints are unbounded, in which case they try to be as small as possible.

컨테이너는 child가 없으면 화면을 꽉채운다.

 

By default, containers return false for all hit tests

기본적으로 컨테이너는 히트테스트를 무시한다. 따라서 만약 안에 Color같은 하위위젯이 있으면 하위위젯이 터치이벤트에 반응하여 hittest=true 를 반환한다.

 

What is BoxDecoration?

An immutable description of how to paint a box

박스를 그리는 불변객체로 한 번 생성하면 이후 내용 변경 불가

 

The box has a border, a body, and may cast a boxShadow.

BoxDecoration 은 "경계(Border)", "몸통(Body)", "그림자(BoxShadow)" 세가지 주요 요소로 구성된다.

 

 

What is BoxShadow?

A shadow cast by a box.

BoxShadow는 박스위젯에 그림자를 추가하며 박스가 떠있는듯한 3D효과를 줄 수 있다.

 

BoxShadow can cast non-rectangular shadows if the box is non-rectangular.

기본적으로 사각형 모양의 그림자를 보여주지만 박스의 모양이 변경되면 그림자도 그 모양을 따라간다. 

 

This class is similar to CSS box-shadow.

CSS처엄 색상, 위치(offset), 흐림정도(Blur), 확장정도(Spread)를 설정할 수 있다. 

 

 

Why is the boxShadow property an array?

BoxShadow가 배열로 정의되어 있는 이유는 Container 위젯에 여러개의 그림자를 동시적용하게 만들기 위함이다. 위 코드처럼 빨강/검정Shadow값을 배열에 담아서 여러개의 그림자를 표현할 수 있다.

 

What's the difference between Container01 and Container02? - InnerBlur vs OuterBlur

 

ShadowBox01
- blurStyle: BlurStyle.inner는 내부 흐림(Inner Blur) 효과를 적용한다.

- 이는 기본적으로 그림자가 박스의 안쪽으로 퍼지게 한다 이 방식은 물리적인 그림자보다는 조명에 의한 반사처럼 내부적인, 간접적인 그림자 느낌을 줄 수 있다.

 

ShadowBox02

- blurRadius: 12와 spreadRadius: 4를 사용하여 그림자를 박스 바깥쪽으로 퍼지게 만든다.

- 그림자가 박스 외부로 흐릿하게 확장되어 입체감과 깊이를 강조한다.

- spreadRadius가 4로 설정되어 그림자가  넓게 퍼지며, 그라데이션처럼 변하는 그림자의 가장자리를 볼 수 있다.

 

 

둘의 차이는 외부/내부 흐림 뿐만 아니라, 그림자가 어떻게 상호작용하는지에 대한 차이이다. 내부 흐림은 박스가 밀폐된 공간에 있는 것처럼 보이게 만들고, 외부 흐림은 물리적인 3D 공간에서 그림자가 주변 환경에 의해 영향을 받는 것처럼 보이게 한다.