[flutter] 플러터 앱 아이콘에 그림자 효과를 줘 입체감을 표현하는 방법

많은 모바일 앱이 3D 효과를 위해 아이콘에 그림자를 사용합니다. 플러터에서도 BoxDecoration 위젯을 사용하여 아이콘에 그림자 효과를 쉽게 추가할 수 있습니다.

그림자 효과 추가

먼저, DecorationImage를 사용하여 아이콘 이미지를 지정합니다. 이후 Container 위젯을 만들고 BoxDecoration를 사용하여 그림자 효과를 추가합니다.

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 7,
        offset: Offset(0, 3), // 그림자 위치 조절
      ),
    ],
  ),
  child: Image(
    image: AssetImage('assets/icon.png'),
  ),
)

위 코드에서, BoxShadow를 사용하여 그림자의 색상, 퍼지 반경, 흐림 반경, 그림자의 위치를 설정할 수 있습니다.

그림자 효과 사용 시 주의사항

그러나, 그림자 효과를 남용하면 앱 성능에 영향을 줄 수 있으므로 그림자의 사용을 최소화하는 것이 좋습니다.

위의 코드를 사용하여 플러터 앱 아이콘에 그림자 효과를 추가할 수 있습니다. 이를 통해 아이콘에 입체감을 더할 수 있고, 사용자 경험을 향상시킬 수 있습니다.

참고: Flutter BoxDecoration class