[Flutter] BoxDecoration 그림자 효과 주기

새로 시작한 프로젝트가 있는데 디자인에 그림자 효과가 들어간 위젯이 있다.

 

그림자 효과를 주기 위해선 어떻게 해야 할까?

 

 

 

위와 같은 원에 아래쪽에 그림자 효과를 넣어보자.

 

    Container(
                width: 160,
                height: 160,
                decoration: BoxDecoration(
                    color: cof2f2f2,
                    shape: BoxShape.circle,
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey.withOpacity(0.7),
                        blurRadius: 5.0,
                        spreadRadius: 0.0,
                        offset: const Offset(0,7),
                      )
                    ]
                ),
              )

 

먼저 Container안에 BoxDecoration을 이용하여 shape 를 동그란 모양으로 만들어 준다.

 

그럼 아래와 같이 동그란 원이 만들어진다.

 

입체적인 효과를 주기 위해서 BoxShadow를 사용하여 그림자 효과를 넣어준다.

 

BoxShadow의 설정은 다음과 같다.

 

color : 그림자 색상 설정

blurRadius : 그림자 효과를 흐리게 해줌, 0일 수록 그림자 선이 선명해짐

spreadRadius : 그림자 효과의 반경, 설정 값이 높을 수록 넓어진다.

offset : x,y의 offset값으로 x의 숫자가 커질수록 오른쪽으로, y의 숫자가 커질수록 아래로 이동하여 표시된다.

 

 

내가 표현하고 싶었던 그림자는 중앙부터 아래로 고르게 분포되는 그림자를 원했기 때문에 offset을 (0,7)로 사용했다.

 

이렇게 하면 처음 위에서 보았던 것처럼 

 

 

예쁜 그림자가 새겨진 원이 그려진다.