[flutter] 아이콘에 그림자 효과 추가하는 방법

22 Dec 2023

flutter

이 포스트에서는 Flutter 앱에서 아이콘에 그림자 효과를 추가하는 방법에 대해 알아보겠습니다.

그림자 효과 추가하기

아이콘에 그림자 효과를 추가하기 위해서는 Icon 위젯을 Container로 감싸고, BoxDecoration을 이용하여 그림자를 적용합니다.

아래는 예시 코드입니다:

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(50),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 7,
        offset: Offset(0, 3), // changes position of shadow
      ),
    ],
  ),
  child: Icon(
    Icons.favorite,
    size: 50,
    color: Colors.red,
  ),
)

위 코드에서 BoxShadow 속성을 이용하여 그림자의 색상, 퍼지는 정도, 흐림 정도, 그림자의 위치 등을 설정할 수 있습니다.

이제 Flutter에서 아이콘에 그림자 효과를 적용하는 방법에 대해 알아보았습니다.

참고 문서: